# Date picker

A form element used to select a single or a range of dates.

Tabs: [Guidelines](/components/web/date-picker/date-picker.guidelines.md) · [Code](/components/web/date-picker/date-picker.code.md)

## 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

```tsx
<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.

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

### Two months

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

### Week numbers

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

### Disabled dates

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

## Related components

- [Date input](/components/web/date-input/date-input.guidelines): Enable users to input a date — either in a textfield or with a date picker.