1 | ---
|
2 | tag: deprecated
|
3 | ---
|
4 |
|
5 | @# Date input
|
6 |
|
7 | <div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
|
8 | <h5 class="@ns-heading">
|
9 |
|
10 | Deprecated: use [**DateInput3**](#datetime2/date-input3)
|
11 |
|
12 | </h5>
|
13 |
|
14 | This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new
|
15 | **DateInput3** component available in the `@blueprintjs/datetime2` package which uses
|
16 | react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the
|
17 | standard in Blueprint v6.
|
18 |
|
19 | </div>
|
20 |
|
21 | The **DateInput** component is an [**InputGroup**](#core/components/input-group)
|
22 | that shows a [**DatePicker**](#datetime/datepicker) inside a [**Popover**](#core/components/popover)
|
23 | on focus. It optionally shows a [**TimezoneSelect**](#datetime/timezone-select) on the right side of
|
24 | the InputGroup, allowing the user to change the timezone of the selected date.
|
25 |
|
26 | @reactExample DateInputExample
|
27 |
|
28 | @## Usage
|
29 |
|
30 | **DateInput** supports both controlled and uncontrolled usage. You can control
|
31 | the selected date by setting the `value` prop, or use the component in
|
32 | uncontrolled mode and specify an initial date by setting `defaultValue`.
|
33 | Use the `onChange` prop callback to listen for changes to the selected day and
|
34 | the `onError` prop to react to invalid dates entered in the text input.
|
35 |
|
36 | This component uses ISO strings to represent timestamp values in the `value` & `defaultValue` props
|
37 | and the `onChange` callback.
|
38 |
|
39 | @## Date formatting
|
40 |
|
41 | **DateInput** requires two props for parsing and formatting dates. These are essentially the plumbing
|
42 | between the text input and the DatePicker.
|
43 |
|
44 | - `formatDate(date, locale?)` receives the current `Date` and returns a string representation of it.
|
45 | The result of this function becomes the input value when it is not being edited.
|
46 | - `parseDate(str, locale?)` receives text inputted by the user and converts it to a `Date` object.
|
47 | The returned `Date` becomes the next value of the component.
|
48 |
|
49 | The optional `locale` argument to these functions is the value of the `locale` prop set on the component.
|
50 |
|
51 | Note that we still use JS `Date` here instead of ISO strings — this makes it easy to delegate to
|
52 | third party libraries like **date-fns**.
|
53 |
|
54 | A simple implementation using built-in browser methods could look like this:
|
55 |
|
56 | ```tsx
|
57 | import { DateInput } from "@blueprintjs/datetime";
|
58 | import { useCallback, useState } from "react";
|
59 |
|
60 | function Example() {
|
61 | const [dateValue, setDateValue] = useState<string>(null);
|
62 | const handleChange = useCallback(setDateValue, []);
|
63 | const formatDate = useCallback((date: Date) => date.toLocaleString(), []);
|
64 | const parseDate = useCallback((str: string) => new Date(str), []);
|
65 |
|
66 | return (
|
67 | <DateInput
|
68 | formatDate={formatDate}
|
69 | onChange={handleChange}
|
70 | parseDate={parseDate}
|
71 | placeholder="M/D/YYYY"
|
72 | value={dateValue}
|
73 | />
|
74 | );
|
75 | }
|
76 | ```
|
77 |
|
78 | An implementation using **date-fns** could look like this:
|
79 |
|
80 | ```tsx
|
81 | import { DateInput } from "@blueprintjs/datetime";
|
82 | import { format, parse } from "date-fns";
|
83 | import { useCallback, useState } from "react";
|
84 |
|
85 | function Example() {
|
86 | const [dateValue, setDateValue] = useState<string>(null);
|
87 | const handleChange = useCallback(setDateValue, []);
|
88 | const dateFnsFormat = "yyyy-MM-dd HH:mm:ss";
|
89 | const formatDate = useCallback((date: Date) => format(date, dateFnsFormat), []);
|
90 | const parseDate = useCallback((str: string) => parse(date, dateFnsFormat), []);
|
91 |
|
92 | return (
|
93 | <DateInput
|
94 | formatDate={formatDate}
|
95 | onChange={handleChange}
|
96 | parseDate={parseDate}
|
97 | placeholder={dateFnsFormat}
|
98 | value={dateValue}
|
99 | />
|
100 | );
|
101 | }
|
102 | ```
|
103 |
|
104 | @## Props interface
|
105 |
|
106 | @interface DateInputProps
|
107 |
|
108 | @## Localization
|
109 |
|
110 | See the [DatePicker localization docs](#datetime/datepicker.localization).
|