Components

Date Picker(React)

Configurable date selector.

Version:7.0.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

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(undefined);

    return <DatePicker value={value} onChange={setValue} />;
}

With an initial date selected

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(new Date());

    return <DatePicker value={value} onChange={setValue} />;
}

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
function DatePickerExample() {
    const [value, setValue] = React.useState('2100-01-01');

    return <DatePicker value={value} onChange={setValue} />;
}

Multiple date selection

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState([
        new Date(),
        new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 2),
        new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 5),
    ]);

    return <DatePicker value={value} onChange={setValue} allowMultiSelection />;
}

Past date selection enabled

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

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(new Date());

    return <DatePicker value={value} onChange={setValue} disabledDays={null} />;
}

Date selection with lastMonth enabled

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

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(new Date());

    return (
        <DatePicker
            value={value}
            onChange={setValue}
            lastMonth={new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 60)}
        />
    );
}

Adding a “dot” indicator with daysThemeDotIndicator

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

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(new Date());

    const isMonday = date => date.getDay() === 1;

    return <DatePicker value={value} onChange={setValue} daysThemeDotIndicator={isMonday} />;
}

Strikeout the date with daysThemeStrikeout

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

July 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
31
function DatePickerExample() {
    const [value, setValue] = React.useState(new Date());

    const isFriday = date => date.getDay() === 5;

    return <DatePicker value={value} onChange={setValue} daysThemeStrikeout={isFriday} />;
}

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
    []
  • onChange
    required

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

    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
  • onMonthChange

    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
    Default
    undefined
  • 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