Date and Time Pickers - Validation

Add custom validation to user inputs.

All the date and time pickers have an API for adding validation constraints. By default, they provide visual feedback if the component value doesn't meet the validation criteria.

Invalid values feedback

On the field—it enables its error state.

On the calendar and clock views—the invalid values are displayed as disabled to prevent their selection.

January 2023

SMTWTFS

Past and future validation

All pickers support the past and future validation.

The disablePast prop prevents the selection all values before today for date pickers and the selection of all values before the current time for time pickers. For date time pickers, it will combine both.

On the day view—all the days before today won't be selectable.
On the month and year views—all the values ending before today won't be selectable.
On the hours and minutes views—all the values ending before the current time won't be selectable.
On the seconds view—all the values before the current second won't be selectable.

DatePicker

TimePicker

DateTimePicker

DateRangePicker

Start

—

End

The disableFuture prop prevents the selection all values after today for date pickers and the selection of all values after the current time for time pickers. For date time pickers, it will combine both.

On the day view—all the days after today won't be selectable.
On the month and year views—all the values beginning after today won't be selectable.
On the hours and minutes views—all the values beginning after the current time won't be selectable.
On the seconds view—all the values after the current second won't be selectable.

DatePicker

TimePicker

DateTimePicker

DateRangePicker

Start

—

End

Date validation

All the props described below are available on all the components supporting date edition.

Minimum and maximum date

The minDate prop prevents the selection of all values before props.minDate.

On the day view—all the days before the minDate won't be selectable.
On the month and year views—all the values ending before the minDate won't be selectable.

DatePicker

DateTimePicker

DateRangePicker

Start

—

End

The maxDate prop prevents the selection of all values after props.maxDate.

On the day view—all the days after the maxDate won't be selectable.
On the month and year views—all the values starting after the maxDate won't be selectable.

DatePicker

DateTimePicker

DateRangePicker

Start

—

End

Disable specific dates

The shouldDisableDate prop prevents the selection of all dates for which it returns true.

In the example below—the weekends are not selectable:

DatePicker

DateTimePicker

DateRangePicker

Start

—

End

Disable specific dates in range components

For components supporting date range edition (DateRangePicker, DateTimeRangePicker 🚧)—the shouldDisableDate prop receives a second argument to differentiate the start and the end date.

In the example below—the start date can't be in the weekend but the end date can.

Start

—

End

Disable specific months

The shouldDisableMonth prop prevents the selection of all dates in months for which it returns true.

DatePicker

DateTimePicker

Disable specific years

The shouldDisableYear prop prevents the selection of all dates in years for which it returns true.

DatePicker

DateTimePicker

Time validation

Minimum and maximum time

The minTime prop prevents the selection of all values between midnight and props.minTime.

TimePicker

DateTimePicker

The maxTime prop prevents the selection of all values between props.maxTime and midnight.

TimePicker

DateTimePicker

Disable specific times

The shouldDisableTime prop prevents the selection of all values for which it returns true.

This callback receives the current view and the value to be tested:

// Disables the hours between 12 AM and 3 PM.
shouldDisableTime={(timeValue, view) => currentView === 'hours' && timeValue > 12 && timeValue < 15}

// Disables the last quarter of each hour.
shouldDisableTime={(timeValue, view) => view === 'minutes' && timeValue >= 45};

// Disables the second half of each minute.
shouldDisableTime={(timeValue, view) => view === 'seconds' && timeValue >= 30};

In the example below—the last quarter of each hour is not selectable.

TimePicker

DateTimePicker

Date and time validation

Minimum and maximum date time

The minDateTime prop prevents the selection of all values after props.minDateTime.

DateTimePicker

The maxDateTime prop prevents the selection of all values after props.maxDateTime.

DateTimePicker

If you want to put time boundaries independent of the date—use the time boundaries instead.

For now, you can not use maxDateTime and maxTime together. maxDateTime will override the maxTime behavior—Same for minDateTime/minTime

// Disable the values between 6 PM and midnight for every day (tomorrow 5 PM is not disabled).
<DateTimePicker maxTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values after today 6 PM (tomorrow 5 PM is disabled).
<DateTimePicker maxDateTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values between midnight and 6 PM for every day (yesterday 5 PM is not disabled).
<DateTimePicker minTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values before today 6 PM (yesterday 5 PM is disabled).
<DateTimePicker minDateTime={dayjs().set('hour', 18).startOf('hour')} />

Show the error

To render the current error—you can subscribe to the onError callback which is called every time the error changes. You can then use the helperText prop of the TextField to pass your error message to your input as shown below.

Try to type a date that is inside the first quarter of 2022—the error will go away.

<NextDatePicker
  defaultValue={dayjs('2022-07-12T00:00:00.000')}
  onError={(newError) => setError(newError)}
  componentsProps={{
    input: {
      helperText: errorMessage,
    },
  }}
  minDate={startOfQ12022}
  maxDate={endOfQ12022}
/>

<NextDatePicker
  defaultValue={dayjs('2022-07-12T00:00:00.000')}
  onError={(newError) => setError(newError)}
  componentsProps={{
    input: {
      helperText: errorMessage,
    },
  }}
  minDate={startOfQ12022}
  maxDate={endOfQ12022}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.