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.

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.

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.

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.

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.

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:

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 cannot be in the weekend but the end date can.

Disable specific months

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

Disable specific years

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

Time validation

Minimum and maximum time

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

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

Disable specific time

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={(value, view) =>
  view === 'hours' && value.hour() > 12 && value.hour() < 15
}

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

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

// Disable the hours before 10 AM every 3rd day
shouldDisableTime={(value, view) =>
  view === 'hours' && value.hour() < 10 && value.date() % 3 === 0
}

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

Date and time validation

Minimum and maximum date time

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

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

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.

API

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

• <DateCalendar />
• <DatePicker />
• <DateRangePicker />
• <DateTimePicker />
• <DateTimeRangePicker />
• <DesktopDatePicker />
• <DesktopDateRangePicker />
• <DesktopDateTimePicker />
• <DesktopDateTimeRangePicker />
• <DesktopTimePicker />
• <MobileDatePicker />
• <MobileDateRangePicker />
• <MobileDateTimePicker />
• <MobileDateTimeRangePicker />
• <MobileTimePicker />
• <StaticDatePicker />
• <StaticDateRangePicker />
• <StaticDateTimePicker />
• <StaticTimePicker />
• <TimePicker />