Date Picker

The Date Picker let the user select a date.

Date pickers are displayed with:

Dialogs on mobile
Text field dropdowns on desktop

Basic usage

The Date Picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

Basic date picker

<NextDatePicker label="Basic date picker" />

<NextDatePicker label="Basic date picker" />

Press Enter to start editing

Component composition

The Date Picker components are built using the DateField for the keyboard editing and the DateCalendar for the view editing. All the documented props of those two components can also be passed to the Date Picker components.

Check-out their documentation page for more information:

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled picker

Controlled picker

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

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

Press Enter to start editing

Responsiveness

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

The MobileNextDatePicker component works best for touch devices and small screens.
The DesktopNextDatePicker component works best for mouse devices and large screens.

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

There are certain caveats when testing pickers, please refer to this section for more information.

For mobile

For desktop

Responsive

<MobileNextDatePicker
  label="For mobile"
  defaultValue={dayjs('2022-04-07')}
/>
<DesktopNextDatePicker
  label="For desktop"
  defaultValue={dayjs('2022-04-07')}
/>
<NextDatePicker label="Responsive" defaultValue={dayjs('2022-04-07')} />

<MobileNextDatePicker
  label="For mobile"
  defaultValue={dayjs('2022-04-07')}
/>
<DesktopNextDatePicker
  label="For desktop"
  defaultValue={dayjs('2022-04-07')}
/>
<NextDatePicker label="Responsive" defaultValue={dayjs('2022-04-07')} />

Press Enter to start editing

Static mode

It is also possible to render the Date Picker without the modal/popover and text field. This can be helpful when building custom popover/modal containers.

January 2023

SMTWTFS

<StaticNextDatePicker displayStaticWrapperAs="desktop" />

<StaticNextDatePicker displayStaticWrapperAs="desktop" />

Press Enter to start editing

Form props

The Date Picker component can be disabled or read-only.

disabled

readOnly

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

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

Press Enter to start editing

Views

The component can contain three views: day, month, and year. By default, only the day and year views are enabled.

You can customize the enabled views using the views prop. Views will appear in the order they're included in the views array.

"year", "month" and "day"

"day"

"month" and "year"

<NextDatePicker
  label={'"year", "month" and "day"'}
  defaultValue={dayjs('2022-04-07')}
  views={['year', 'month', 'day']}
/>
<NextDatePicker
  label={'"day"'}
  defaultValue={dayjs('2022-04-07')}
  views={['day']}
/>
<NextDatePicker
  label={'"month" and "year"'}
  defaultValue={dayjs('2022-04-07')}
  views={['month', 'year']}
/>

<NextDatePicker
  label={'"year", "month" and "day"'}
  defaultValue={dayjs('2022-04-07')}
  views={['year', 'month', 'day']}
/>
<NextDatePicker
  label={'"day"'}
  defaultValue={dayjs('2022-04-07')}
  views={['day']}
/>
<NextDatePicker
  label={'"month" and "year"'}
  defaultValue={dayjs('2022-04-07')}
  views={['month', 'year']}
/>

Press Enter to start editing

Landscape orientation

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

You can force a specific orientation using the orientation prop.

April 2022

SMTWTFS

<StaticNextDatePicker
  orientation="landscape"
  defaultValue={dayjs('2022-04-07')}
/>

<StaticNextDatePicker
  orientation="landscape"
  defaultValue={dayjs('2022-04-07')}
/>

Press Enter to start editing

Helper text

You can show a helper text with the date format accepted.

Helper text example

MM / DD / YYYY

<NextDatePicker
  label="Helper text example"
  componentsProps={{
    input: {
      helperText: 'MM / DD / YYYY',
    },
  }}
/>

<NextDatePicker
  label="Helper text example"
  componentsProps={{
    input: {
      helperText: 'MM / DD / YYYY',
    },
  }}
/>

Press Enter to start editing

Custom input component

You can customize the rendering of the input with the Input component slot. Make sure to spread inputProps correctly to the custom input component.

<NextDatePicker
  label="Custom input"
  defaultValue={dayjs('2022-04-07')}
  components={{
    Input: BrowserInput,
  }}
/>

<NextDatePicker
  label="Custom input"
  defaultValue={dayjs('2022-04-07')}
  components={{
    Input: BrowserInput,
  }}
/>

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.

Date Picker

Basic usage

Component composition

Uncontrolled vs. Controlled

Responsiveness

Static mode

Form props

Views

Landscape orientation

Thu, Apr 7

Helper text

Custom input component

Validation

Localization

API