Date

A date picker input that uses the browser's native date control. Great for collecting dates of birth, appointment dates, and deadlines.

Schema Example

datejson

{
  id: "dob",
  type: "date",
  label: "Date of birth",
  required: true
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
required	boolean	Whether a date must be selected.
defaultValue	string	Default date in YYYY-MM-DD 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 Validation

Date with min validationjson

{
  id: "start-date",
  type: "date",
  label: "Project start date",
  required: true,
  validation: [
    { type: "min", value: "2024-01-01", message: "Date must be in 2024 or later" }
  ]
}

Answer Format

Returns a string in YYYY-MM-DD format (e.g. "2024-06-15").

Practical Example

Advanced Example

An appointment booking form with check-in and check-out dates:

BookingForm.tsxtsx

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

const bookingSchema: SurveySchema = {
  id: 'booking-form',
  title: 'Book Your Stay',
  pages: [
    {
      id: 'dates',
      questions: [
        {
          id: 'guest-name',
          type: 'text',
          label: 'Guest name',
          required: true,
          placeholder: 'Full name',
        },
        {
          id: 'check-in',
          type: 'date',
          label: 'Check-in date',
          required: true,
          validation: [
            { type: 'min', value: '2025-01-01', message: 'Earliest check-in is Jan 1, 2025' },
          ],
        },
        {
          id: 'check-out',
          type: 'date',
          label: 'Check-out date',
          required: true,
        },
        {
          id: 'special-requests',
          type: 'textarea',
          label: 'Special requests',
          placeholder: 'Late check-in, extra pillows, etc.',
        },
      ],
    },
  ],
  settings: { submitText: 'Confirm Booking' },
};

function BookingForm() {
  return (
    <SurveyRenderer
      schema={bookingSchema}
      options={{
        onSubmit: async (answers) => {
          console.log('Booking:', answers);
          // answers['check-in'] → "2025-03-15"
          // answers['check-out'] → "2025-03-18"
        },
      }}
    />
  );
}