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

Question

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?

@Kinduser No it doesn't. Just tested with highlightedDates: ['2017-08-01']. I mean the prop is passed to the component, of course, but there's no effect. — asliwinski, Aug 01 '17 at 10:36
If the props are properly being passed, just look through the docs regarding this component. In case if the docs doesn't contain anything about it, consider changing your date picker, material-ui has a good one. — kind user, Aug 01 '17 at 10:38
There is an isDayHighlighted: PropTypes.func proptype defined in the docs (https://github.com/airbnb/react-dates) but I'm a bit confused on how to apply it to the use case I described :) — asliwinski, Aug 01 '17 at 10:46

score 4 · Accepted Answer · answered Aug 01 '17 at 11:53

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

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

1 Answers1