1 | @# Date picker
|
2 |
|
3 | DatePicker renders a UI to choose a single date and (optionally) a time of day.
|
4 | It is built on top of the [__react-day-picker__ library](https://github.com/gpbl/react-day-picker).
|
5 | If a `timePrecision` is defined, it will show a [TimePicker](#datetime/timepicker) underneath the
|
6 | calendar.
|
7 |
|
8 | @reactExample DatePickerExample
|
9 |
|
10 | @## Usage
|
11 |
|
12 | DatePicker supports both controlled and uncontrolled usage. You can control
|
13 | the selected day by setting the `value` prop, or use the component in
|
14 | uncontrolled mode and specify an initial day by setting `defaultValue`. Use the
|
15 | `onChange` prop to listen for changes to the selected day.
|
16 |
|
17 | @## Props interface
|
18 |
|
19 | Some props are managed by the `DatePicker` component, while others are passed
|
20 | to the __react-day-picker__ library. These passed-through props are documented in full
|
21 | in the [__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/).
|
22 |
|
23 | @interface IDatePickerProps
|
24 |
|
25 | @## Shortcuts
|
26 |
|
27 | The menu on the left of the calendars provides "shortcuts" which allow users to
|
28 | quickly select common dates. The items in this menu are controlled through
|
29 | the `shortcuts` prop:
|
30 |
|
31 | - `false` (default) will hide the shortcuts menu,
|
32 | - `true` will show the built-in shortcuts, and
|
33 | - custom shortcuts can be shown by defining an array of `DatePickerShortcut` objects.
|
34 |
|
35 | The **preset shortcuts** can be seen in the example above. They are as follows:
|
36 |
|
37 | - Today
|
38 | - Yesterday
|
39 | - 1 week ago
|
40 | - 1 month ago
|
41 | - 3 months ago
|
42 | - 1 year ago
|
43 |
|
44 | **Custom shortcuts** use the following interface:
|
45 |
|
46 | @interface IDatePickerShortcut
|
47 |
|
48 | @## Modifiers
|
49 |
|
50 | You can use the `modifiers` prop to conditionally apply styles to days.
|
51 | Modifiers are a react-day-picker concept and are documented in full in the
|
52 | [__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/matching-days).
|
53 |
|
54 | The example below renders a DatePicker that prevents the user from selecting any Sundays,
|
55 | by using the component in controlled mode and with the `modifiers` prop:
|
56 |
|
57 | ```scss
|
58 | // in CSS
|
59 | .#{$ns}-datepicker .DayPicker-Day--isSunday {
|
60 | // CSS rules to make the day appear disabled
|
61 | }
|
62 | ```
|
63 |
|
64 | ```tsx
|
65 | // in TypeScript
|
66 | import { DatePicker } from "@blueprintjs/datetime";
|
67 |
|
68 | export class DatePickerExample extends React.Component<{}, { selectedDate: Date }> {
|
69 | public state = { selectedDate: new Date() };
|
70 |
|
71 | public render() {
|
72 | // name of modifier function becomes the suffix for the CSS class above
|
73 | const modifiers = { isSunday };
|
74 | return (
|
75 | <DatePicker
|
76 | modifiers={modifiers}
|
77 | onChange={newDate => this.handleChange(newDate)}
|
78 | value={this.state.selectedDate}
|
79 | />
|
80 | );
|
81 | }
|
82 |
|
83 | private handleChange(date: Date) {
|
84 | if (!isSunday(date)) {
|
85 | this.setState({ selectedDate: date });
|
86 | }
|
87 | }
|
88 | }
|
89 |
|
90 | function isSunday(date: Date) {
|
91 | return date.getDay() === 0;
|
92 | }
|
93 | ```
|
94 |
|
95 | @## Localization
|
96 |
|
97 | `DatePicker`, `DateRangePicker`, `DateInput`, and `DateRangeInput` all support calendar localization
|
98 | using an interface defined by __react-day-picker__:
|
99 |
|
100 | ```js
|
101 | import { LocaleUtils } from "react-day-picker";
|
102 | ```
|
103 |
|
104 | By supplying a `locale: string` and `localeUtils: LocaleUtils` prop to these Blueprint components,
|
105 | you can customize how dates are rendered, which day of the week is the first column, etc.
|
106 |
|
107 | You will need to define the functions of `LocaleUtil` on your own.
|
108 | [See the interface definition](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5)
|
109 | for more details.
|
110 |
|
111 | Although `@blueprintjs/datetime` and `react-day-picker` do not explicitly require
|
112 | [__moment.js__](https://momentjs.com/) or [__date-fns__](https://date-fns.org/) as dependencies,
|
113 | you may wish to use those third-party implementations of localization so that you do not have to
|
114 | write these functions yourself.
|
115 |
|
116 | To use moment.js for localization, make sure to include __moment__ in your dependencies and use
|
117 | `MomentLocaleUtils` from `react-day-picker/moment` as follow:
|
118 |
|
119 | ```tsx
|
120 | import MomentLocaleUtils from "react-day-picker/moment";
|
121 | import "moment/locale/fr";
|
122 |
|
123 | <DatePicker locale="fr" localeUtils={MomentLocaleUtils} />;
|
124 | ```
|
125 |
|
126 | More detailed examples can be found in the
|
127 | [__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/localization).
|