Date Range Picker

The date range picker let the user select a range of dates.

Basic usage

Check-in

—

Check-out

<NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />

<NextDateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled picker

Start

—

End

Controlled picker

Start

—

End

<DemoItem label="Uncontrolled picker">
  <NextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="Controlled picker">
  <NextDateRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

<DemoItem label="Uncontrolled picker">
  <NextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="Controlled picker">
  <NextDateRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

Press Enter to start editing

Responsiveness

The date range picker component is designed to be optimized for the device it runs on.

The MobileNextDateRangePicker component works best for touch devices and small screens.
The DesktopNextDateRangePicker component works best for mouse devices and large screens.

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

Start

—

End

For desktop

Start

—

End

Responsive

Start

—

End

<DemoItem label="For mobile">
  <MobileNextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="For desktop">
  <DesktopNextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="Responsive">
  <NextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>

<DemoItem label="For mobile">
  <MobileNextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="For desktop">
  <DesktopNextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>
<DemoItem label="Responsive">
  <NextDateRangePicker
    defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  />
</DemoItem>

Press Enter to start editing

Static mode

It is also possible to render any date range picker without the modal/popover and text field. This will enable building custom popover/modal containers.

April 2022

SMTWTFS

May 2022

SMTWTFS

<StaticNextDateRangePicker
  displayStaticWrapperAs="desktop"
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
/>

<StaticNextDateRangePicker
  displayStaticWrapperAs="desktop"
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
/>

Press Enter to start editing

Form props

The date range picker component can be disabled or read-only.

disabled

Start

—

End

readOnly

Start

—

End

<DemoItem label="disabled">
  <NextDateRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly">
  <NextDateRangePicker readOnly />
</DemoItem>

<DemoItem label="disabled">
  <NextDateRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly">
  <NextDateRangePicker readOnly />
</DemoItem>

Press Enter to start editing

Validation

You can find the documentation in the Validation page

Different number of months

Note that the calendars prop only works in desktop mode.

1 calendar

Start

—

End

2 calendars

Start

—

End

3 calendars

Start

—

End

<DemoItem label="1 calendar">
  <NextDateRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <NextDateRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars">
  <NextDateRangePicker calendars={3} />
</DemoItem>

<DemoItem label="1 calendar">
  <NextDateRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <NextDateRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars">
  <NextDateRangePicker calendars={3} />
</DemoItem>

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.

—

<NextDateRangePicker
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  components={{
    Input: BrowserInput,
  }}
/>

<NextDateRangePicker
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  components={{
    Input: BrowserInput,
  }}
/>

Press Enter to start editing

Customized day rendering

The displayed days are customizable with the Day component slot. You can take advantage of the internal DateRangePickerDay component.

April 2022

SMTWTFS

May 2022

SMTWTFS

<StaticNextDateRangePicker
  displayStaticWrapperAs="desktop"
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  components={{ Day: DateRangePickerDay }}
/>

<StaticNextDateRangePicker
  displayStaticWrapperAs="desktop"
  defaultValue={[dayjs('2022-04-07'), dayjs('2022-04-10')]}
  components={{ Day: DateRangePickerDay }}
/>

Press Enter to start editing

🚧 Pre-defined range shortcuts

Range shortcuts allows your users to select a commonly-used range in one click (eg: last week, last month, …)

🚧 Month range Picker

Month range picker allows setting date ranges by picking months only.

API

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