Date Time Picker

Combined date & time picker.

This component combines the date & time pickers. It allows the user to select both date and time with the same control.

Note that this component is the DatePicker and TimePicker component combined, so any of these components' props can be passed to the DateTimePicker.

Requirements

This component relies on the date management library of your choice. It supports date-fns, luxon, dayjs, moment and any other library via a public dateAdapter interface.

Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with LocalizationProvider:

// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter
import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={DateFnsAdapter}>
      ...
    </LocalizationProvider>
  );
}

Basic usage

Allows choosing date then time. There are 4 steps available (year, date, hour and minute), so tabs are required to visually distinguish date/time steps.

<LocalizationProvider dateAdapter={DateFnsAdapter}>
  <DateTimePicker
    renderInput={(props) => <TextField variant="outlined" {...props} />}
    label="DateTimePicker"
    value={selectedDate}
    onChange={handleDateChange}
  />
</LocalizationProvider>

Responsiveness

The DateTimePicker component is designed and optimized for the device it runs on.

• The "Mobile" version works best for touch devices and small screens.
• The "Desktop" version works best for mouse devices and large screens.

By default, the DateTimePicker component uses a @media (pointer: fine) media query to determine which version to use. This can be customized with the desktopModeMediaQuery prop.

Date and time validation

It is possible to restrict date and time selection in two ways:

• by using minDateTime/maxDateTime its possible to restrict time selection to before or after a particular moment in time
• using minTime/maxTime, you can disable selecting times before or after a certain time each day respectively

Customization

Here are some examples of heavily customized date & time pickers:

API

• <DateTimePicker />