InputDate

Interface of InputDate
🏗 Coming Soon
Inform
Note: InputDate must be imported from its specific location rather than the package root.

Import path: @looker/components/lib/InputDate

InputDate provides a text input and calendar to select a single date, which can be used as a form input or filter.

Value & Default Value

InputDate can be initialized with a default selected date.

Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6

Change Event

InputDate accepts a single event callback: onChange. The handler will receive a javascript Date object.

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Selected:

Jul 27, 2020

Date Validation

validationType

If you handle form validation externally (such as treating this date field as required), InputDate accepts the validationType prop to render an error state.

Validation Error
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

onValidationFail

InputDate has built-in validation to verify that users enter a valid date string when manually typing into the provided textarea. If you wish to build into this validation, you can pass an onValidationFail callback which will fire on blur if the text value does not match expected localized format.

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

INSTRUCTIONS: Try typing an invalid date string (ex: 'not/a/valid/date') and clicking or tabbing away to trigger blur event.

Result:

Valid Input

I18n

InputDate acccepts two different props for use in localizing calendar output. The first is dateStringLocale accepts a country code and is used to format the rendered date string in the input box (i.e. 06/04/2020). The second is localization, which is used to translate the calendar format and naming.

dateStringLocale

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

localization

The localization prop can be used to provide translation strings for the names of the months, the days of the week, and what day the week starts on (usually 0 or 1).

Lu
Ma
Me
Gi
Ve
Sa
Do
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2

Composing InputDate in a Popover

A common UI pattern is to combine InputDate with Popover, Button, and DateFormat. This enables the full calendar functionality without having to take up so much space on the page.