---
title: DateRangePicker
---

# DateRangePicker

**DateRangePicker** shows two sequential month calendars and allows the user to select a _range_ of days.

## Import

```ts copy
import { DateRangePicker } from "@blueprintjs/datetime";
```

@reactExample DateRangePickerExample

## Usage

**DateRangePicker** supports both controlled and uncontrolled usage. You can control the selected date range by setting
the `value` prop, or use the component in uncontrolled mode and specify an initial date range by setting `defaultValue`.
Use the `onChange` prop to listen for changes to the selected range.

## Date ranges

**DateRangePicker** uses the `DateRange` type across its API. This is an alias for the tuple type `[Date, Date]`.

Semantically:

- `[null, null]` represents an empty selection.
- `[someDate, null]` represents a date range where a single endpoint is known.
- `[someDate, someOtherDate]` represents a full date range where both endpoints are known.

## Shortcuts

The menu on the left of the calendars provides "shortcuts" which allow users to quickly select common date ranges. The
items in this menu are controlled through the `shortcuts` prop:

- `true` (default) will show the built-in shortcuts,
- `false` will hide the shortcuts menu, and
- custom shortcuts can be shown by defining an array of `DateRangeShortcut` objects.

The **preset shortcuts** can be seen in the example above. They are as follows:

- Today (only appears if `allowSingleDayRange={true}`)
- Yesterday (only appears if `allowSingleDayRange={true}`)
- Past week
- Past month
- Past 3 months
- Past 6 months
- Past year
- Past 2 years

**Custom shortcuts** use the following interface:

@interface DateRangeShortcut

## Props interface

@interface DateRangePickerProps

## Localization

See the [**DatePicker** localization docs](#datetime/date-picker.localization).