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

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

Week numbers

Disabled dates

Related components

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