1 | @# Date range picker
|
2 |
|
3 | A `DateRangePicker` shows two sequential month calendars and lets the user select a single range of
|
4 | days.
|
5 |
|
6 | @reactExample DateRangePickerExample
|
7 |
|
8 | @## Date ranges
|
9 |
|
10 | `DateRangePicker` uses the `DateRange` type across its API. This is an alias for
|
11 | the tuple type `[Date, Date]`.
|
12 |
|
13 | Semantically:
|
14 | * `[null, null]` represents an empty selection.
|
15 | * `[someDate, null]` represents a date range where a single endpoint is known.
|
16 | * `[someDate, someOtherDate]` represents a full date range where both endpoints are known.
|
17 |
|
18 | @## Shortcuts
|
19 |
|
20 | The menu on the left of the calendars provides "shortcuts" that allow users to
|
21 | quickly select common date ranges. The items in this menu are controlled through
|
22 | the `shortcuts` prop: `true` to show presets (default), `false` to hide, or an
|
23 | array of `IDateRangeShortcut` objects to define custom shortcuts.
|
24 |
|
25 | The **preset shortcuts** can be seen in the example above. They are as follows:
|
26 |
|
27 | - Today (only appears if `allowSingleDayRange={true}`)
|
28 | - Yesterday (only appears if `allowSingleDayRange={true}`)
|
29 | - Past week
|
30 | - Past month
|
31 | - Past 3 months
|
32 | - Past 6 months
|
33 | - Past year
|
34 | - Past 2 years
|
35 |
|
36 | **Custom shortcuts** use the following interface:
|
37 |
|
38 | @interface IDateRangeShortcut
|
39 |
|
40 | @## Props
|
41 |
|
42 | Use the `onChange` prop to listen for changes to the set date range. You can
|
43 | control the selected date range by setting the `value` prop, or use the
|
44 | component in uncontrolled mode and specify an initial date range by setting
|
45 | `defaultValue`.
|
46 |
|
47 | ```tsx
|
48 | import { DateRangePicker } from "@blueprintjs/datetime";
|
49 |
|
50 | <DateRangePicker
|
51 | value={[this.state.startDate, this.state.endDate]}
|
52 | onChange={this.handleDateChange}
|
53 | />
|
54 | ```
|
55 |
|
56 | @interface IDateRangePickerProps
|
57 |
|
58 | @## Localization
|
59 |
|
60 | See the [Date picker localization docs](#datetime/datepicker.localization).
|