javascriptreactjsreact-dates

How to pass an array of dates to react-dates component?


I'm using a DayPickerSingleDateController component. I'm keeping a set of to-be-highlighted dates in an array in the state. I don't find it clear in the docs how I can pass that array to the component as a prop (if possible).

I would expect something like:

<DayPickerSingleDateController highlightedDates={this.state.highlightedDates} />

How can I achieve this functionality?


Solution

  • OK, I figured it out from the stories (https://github.com/airbnb/react-dates/tree/master/stories)

    import isSameDay from 'react-dates/lib/utils/isSameDay';
    ...
    
    render() {
        ...
        let datesList = this.state.highlightedDates.map(date => {
            return moment(date);
        });
        ...
        return (
            <DayPickerSingleDateController
                isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
            />
        );
    }