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
– asliwinski, Commented Aug 1, 2017 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
– kind user, Commented Aug 1, 2017 at 10:38
There is an isDayHighlighted: PropTypes.func proptype defined in the docs (github.com/airbnb/react-dates) but I'm a bit confused on how to apply it to the use case I described :) — asliwinski
– asliwinski, Commented Aug 1, 2017 at 10:46

asliwinski · Accepted Answer · 2017-08-01 11:53:00Z

4

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

answered Aug 1, 2017 at 11:53

asliwinski

1,7244 gold badges22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related