Components

Date Picker(React)

Configurable date selector.

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

Initial dates

The DatePicker can optionally have an initial date selected.

No initial date selected

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: undefined,
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    render() {
        const { value } = this.state;

        return <DatePicker value={value} onChange={this.onChange} />;
    }
}

With an initial date selected

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    render() {
        const { value } = this.state;

        return <DatePicker value={value} onChange={this.onChange} />;
    }
}

Multiple date selection

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: [
                new Date(),
                new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 2),
                new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 5),
            ],
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    render() {
        const { value } = this.state;

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

Past date selection enabled

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

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    render() {
        const { value } = this.state;

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

Date selection with lastMonth enabled

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

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    render() {
        const { value } = this.state;

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

Adding a “dot” indicator with daysThemeDotIndicator

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

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
        };

        this.onChange = this.onChange.bind(this);
        this.isMonday = this.isMonday.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    isMonday(date) {
        return date.getDay() === 1;
    }

    render() {
        const { value } = this.state;

        return (
            <DatePicker
                value={value}
                onChange={this.onChange}
                daysThemeDotIndicator={this.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.

May 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
class DatePickerExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
        };

        this.onChange = this.onChange.bind(this);
        this.isFriday = this.isFriday.bind(this);
    }

    onChange(newDate) {
        this.setState({
            value: newDate,
        });
    }

    isFriday(date) {
        return date.getDay() === 5;
    }

    render() {
        const { value } = this.state;

        return (
            <DatePicker value={value} onChange={this.onChange} daysThemeStrikeout={this.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
    union
    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
    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