@thumbtack/tp-ui-react-date-picker v7.0.9

package: '@thumbtack/tp-ui-react-date-picker' kit: component/date-picker.yaml platform: react

url: /api/components/component/date-picker/react/

Initial dates

The DatePicker can optionally have an initial date selected.

No initial date selected

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

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

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.

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.

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}
            />
        );
    }
}