InputDateRange

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

Import path: @looker/components/lib/InputDateRange

InputDateRange provides an interface to select to a date range, either through the calendar interface or text input boxes.

Value

InputDateRange can receive a value from an outside source and will update accordingly.

Date (07/27/2020)
Date (07/27/2020)
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
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
31
1
2
3
4
5

Default Value

InputDateRange can be initialized with a default selected date range, for use in uncontrolled form.

06/03/2019
06/08/2019
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
Su
Mo
Tu
We
Th
Fr
Sa
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
3

Change Event

InputDateRange accepts a single event callback: onChange. The handler will receive a date range object.

Selected:

Jul 27, 2020Jul 27, 2020
07/27/2020
07/27/2020
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
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
31
1
2
3
4
5

onValidationFail

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

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

Result:

Valid Input
Date (07/27/2020)
Date (07/27/2020)
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
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
31
1
2
3
4
5

I18n

InputDateRange 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

2020.06.02
2020.06.09
Su
Mo
Tu
We
Th
Fr
Sa
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
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).

Date (27/07/2020)
Date (27/07/2020)
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
Lu
Ma
Me
Gi
Ve
Sa
Do
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
31
1
2
3
4
5
6

Composing InputDateRange in a Popover

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