Date Time Picker

The Date Time Picker component lets users select a date and time.

Basic usage

Component composition

The component is built using the DateTimeField for the keyboard editing, the DateCalendar for the date view editing, the DigitalClock for the desktop view editing, and the TimeClock for the mobile time view editing.

Check-out their documentation page for more information:

• Date Field
• Date Calendar
• Digital Clock
• Time Clock

You can check the available props of the combined component on the dedicated API page. Some DateTimeField props are not available on the Picker component, you can use slotProps.field to pass them to the field.

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Available components

The component is available in four variants:

• The DesktopDateTimePicker component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.

• The MobileDateTimePicker component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.

• The DateTimePicker component which renders DesktopDateTimePicker or MobileDateTimePicker depending on the device it runs on.

• The StaticDateTimePicker component which renders without the popover/modal and field.

By default, the DateTimePicker component renders the desktop version if the media query @media (pointer: fine) matches. This can be customized with the desktopModeMediaQuery prop.

Form props

The component can be disabled or read-only.

Views

The component supports six views: day, month, year, hours, minutes and seconds.

By default, the year, day, hours, and minutes views are enabled. Use the views prop to change this behavior:

By default, the component renders the day view on mount. Use the openTo prop to change this behavior:

Landscape orientation

By default, the Date Time Picker component automatically sets the orientation based on the window.orientation value.

You can force a specific orientation using the orientation prop.

Choose time view renderer

You can use the viewRenderers prop to change the view that is used for rendering a view. You might be interested in using the Time Clock instead of the Digital Clock or removing the time view rendering altogether in favor of only using the field to input the time.

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

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

• <DateTimePicker />
• <DesktopDateTimePicker />
• <DigitalClock />
• <MobileDateTimePicker />
• <MultiSectionDigitalClock />
• <StaticDateTimePicker />
• <TimeClock />