Date Time Picker

The Date Time Picker component let the user select a date and time.

Basic usage

Basic date time picker

<NextDateTimePicker label="Basic date time picker" />

<NextDateTimePicker label="Basic date time picker" />

Press Enter to start editing

Component composition

The component is built using the DateTimeField for the keyboard editing, the DateCalendar for the date view editing and the TimeClock for the time view editing. All the documented props of those three components can also be passed to the Date Time Picker component.

Check-out their documentation page for more information:

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled picker

Controlled picker

<NextDateTimePicker
  label="Uncontrolled picker"
  defaultValue={dayjs('2022-04-07T15:30')}
/>
<NextDateTimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<NextDateTimePicker
  label="Uncontrolled picker"
  defaultValue={dayjs('2022-04-07T15:30')}
/>
<NextDateTimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

Available components

The component is available in four variants:

The DesktopNextDateTimePicker 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 MobileNextDateTimePicker 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 NextDateTimePicker component which renders DesktopNextDateTimePicker or MobileNextDateTimePicker depending on the device it runs on.
The StaticDateTimePicker component which renders without the popover/modal and field.

Desktop variant

Mobile variant

Responsive variant

Static variant

April 2022

SMTWTFS

<DemoItem label="Desktop variant">
  <DesktopNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <NextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>

<DemoItem label="Desktop variant">
  <DesktopNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <NextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticNextDateTimePicker defaultValue={dayjs('2022-04-07T15:30')} />
</DemoItem>

Press Enter to start editing

By default, the NextDateTimePicker 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.

disabled

readOnly

<NextDateTimePicker label="disabled" disabled />
<NextDateTimePicker label="readOnly" readOnly />

<NextDateTimePicker label="disabled" disabled />
<NextDateTimePicker label="readOnly" readOnly />

Press Enter to start editing

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:

"year"", "month", "day", "hours", "minutes" and "seconds"

"day", "hours"

"year", "day", "hours", "minutes", "seconds"

<DemoItem
  label={'"year"", "month", "day", "hours", "minutes" and "seconds"'}
>
  <NextDateTimePicker
    views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"day", "hours"'}>
  <NextDateTimePicker views={['day', 'hours']} />
</DemoItem>
<DemoItem label={'"year", "day", "hours", "minutes", "seconds"'}>
  <NextDateTimePicker
    views={['year', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>

<DemoItem
  label={'"year"", "month", "day", "hours", "minutes" and "seconds"'}
>
  <NextDateTimePicker
    views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>
<DemoItem label={'"day", "hours"'}>
  <NextDateTimePicker views={['day', 'hours']} />
</DemoItem>
<DemoItem label={'"year", "day", "hours", "minutes", "seconds"'}>
  <NextDateTimePicker
    views={['year', 'day', 'hours', 'minutes', 'seconds']}
  />
</DemoItem>

Press Enter to start editing

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

"year"

"hours"

<MobileNextDateTimePicker label={'"year"'} openTo="year" />
<MobileNextDateTimePicker label={'"hours"'} openTo="hours" />

<MobileNextDateTimePicker label={'"year"'} openTo="year" />
<MobileNextDateTimePicker label={'"hours"'} openTo="hours" />

Press Enter to start editing

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.

January 2023

SMTWTFS

<StaticNextDateTimePicker orientation="landscape" />

<StaticNextDateTimePicker orientation="landscape" />

Press Enter to start editing

Validation

You can find the documentation in the Validation page

Localization

You can find the documentation about localization in the Date localization and Component localization.

API

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