Date & Time

A combined date and time picker using the browser's native datetime-local input. Use minDatetime and maxDatetime to constrain the selectable range.

Schema Example

datetimejson

{
  id: "appointment",
  type: "datetime",
  label: "Appointment date & time",
  required: true,
  minDatetime: "2025-01-01T09:00",
  maxDatetime: "2025-12-31T17:00"
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
minDatetime	string	Minimum selectable datetime (e.g. `"2025-01-01T09:00"`).
maxDatetime	string	Maximum selectable datetime (e.g. `"2025-12-31T17:00"`).
required	boolean	Whether a datetime must be selected.
defaultValue	string	Default datetime in YYYY-MM-DDTHH:MM format.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules for this question.

With Min/Max Constraints

Datetime with constraintsjson

{
  id: "event-datetime",
  type: "datetime",
  label: "Event date & time",
  required: true,
  minDatetime: "2025-06-01T08:00",
  maxDatetime: "2025-06-30T22:00",
  description: "Events must be scheduled during June 2025"
}

Answer Format

Returns a string in YYYY-MM-DDTHH:MM format (e.g. "2025-06-15T14:30").

Practical Example

Advanced Example

An event registration form with datetime selection:

EventRegistration.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const eventSchema: SurveySchema = {
  id: 'event-registration',
  title: 'Register for Event',
  pages: [
    {
      id: 'details',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Full name',
          required: true,
        },
        {
          id: 'email',
          type: 'email',
          label: 'Email',
          required: true,
        },
        {
          id: 'session',
          type: 'datetime',
          label: 'Preferred session date & time',
          required: true,
          minDatetime: '2025-03-01T09:00',
          maxDatetime: '2025-03-31T18:00',
          description: 'Sessions available March 2025, 9 AM – 6 PM',
        },
        {
          id: 'notes',
          type: 'textarea',
          label: 'Special requirements',
          placeholder: 'Accessibility needs, dietary requirements, etc.',
        },
      ],
    },
  ],
  settings: { submitText: 'Register' },
};

function EventRegistration() {
  return (
    <SurveyRenderer
      schema={eventSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.session → "2025-03-15T14:30"
          console.log('Registration:', answers);
        },
      }}
    />
  );
}