Components

Date Picker(React)

Configurable date selector.

Version:10.1.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { DatePicker } from '@thumbtack/thumbprint-react';

Initial dates

The DatePicker can optionally have an initial date selected.

No initial date selected

November 2019
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
29
30

With an initial date selected

November 2019
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
29
30

Using strings to set the date

You can pass the date as a string that can be parsed to a Date object.

January 2100
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
29
30
31

Multiple date selection

November 2019
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
29
30

Past date selection enabled

The DatePicker disables past days by default. This can be enabled by setting disabledDays to null.

November 2019
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
29
30

Date selection with lastMonth enabled

Users won’t be able to navigate or interact with the days after lastMonth.

November 2019
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
29
30

Adding a “dot” indicator with daysThemeDotIndicator

Pass a function for this prop that returns true for any date where a dot indicator should appear.

November 2019
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
29
30

Strikeout the date with daysThemeStrikeout

Pass a function for this prop that returns true for any date where the number should be crossed out.

November 2019
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
29
30

Props

DatePicker

Thin wrapper around react-day-picker that renders a calendar.

  • value
    Default
    []
  • disabledDays
    Default
    { before: new Date() }
  • allowMultiSelection
    Default
    false