Date picker

Features

• Supports range selection.
• Pick days, months, years or even decades.
• Highly customisable.

When to use

At Pleo, we almost always use the date picker with the prop showNeighboringMonth. We'll likely make this the default variation soon.

Examples

Range

<DatePicker onChange={() => {}} selectRange />

Allow partial range

In some cases, you may want to allow users to select either a single date or a range of dates. This can be achieved by allowing partial range.

<DatePicker
    selectRange
    allowPartialRange
    onChange={() => {
        // Will now also be called when the first date is selected
    }}
/>

Two months

<DatePicker onChange={() => {}} showDoubleView />

Week numbers

<DatePicker onChange={() => {}} showWeekNumbers />

Disabled dates

<DatePicker
    onChange={() => {}}
    tileDisabled={({date}) => date.getDay() === 0 || date.getDay() === 6}
/>

Related components

• Date input: Enable users to input a date — either in a textfield or with a date picker.