Components

Date Picker(React)

Configurable date selector.

Version:9.3.0 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

September 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

September 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

September 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.

September 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.

September 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.

September 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.

September 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

    One or more dates to show as selected in the initial UI. Each “date” can be a JS Date object or a string representing a date, and either a single object or an array of such objects can be provided.

    Type

    This prop can be one of the following 3 types:

    • instanceOf(Date)
    • string
    • arrayOf
    Default
    []
  • month

    Date object representing the month that is currently displayed by the calendar. If omitted it will default to the first date in the value prop. You should update it in response to the onMonthChange prop.

    Type
    instanceOf(Date)
    Default
    undefined
  • onChange
    required

    Callback that is triggered when th user selects a date. The function receives an array of a JavaScript Date objects for each of the currently selected dates.

    Type
    func
  • onMonthChange
    required

    Callback that is triggered when the user navigates to a different month using the navigation buttons or keyboard. The function receives a single JavaScript Date object indicating the new on-screen month.

    Type
    func
  • allowMultiSelection

    Boolean that determines whether or not the user is allowed to select more than one date at a time. Defaults to false.

    Type
    bool
    Default
    false
  • disabledDays

    A react-day-picker modifier for greater control over disabled days. Past selection is disabled by default. http://react-day-picker.js.org/docs/modifiers.html

    Type
    custom
    Default
    { before: new Date() }
  • lastMonth

    A Date object representing the last allowed month. Users won’t be able to navigate or interact with the days after it.

    Type
    instanceOf(Date)
    Default
    null
  • daysThemeDotIndicator

    Applies a blue dot indicator below the numeric day in the calendar’s day cell if the function returns true for a given JavaScript Date.

    Type
    func
    Default
    undefined
  • daysThemeStrikeout

    Applies a strikeout treatment on the numeric day in the calendar’s day cell if the function returns true for a given JavaScript Date.

    Type
    func
    Default
    undefined