React-dates: Date highlighter

[tandonrajiv]

Hello There.

I want to highlight dates between today and date selected by user on SingleDatePicker

I donot konw how to use isDayHighlighted: PropTypes.func,

<SingleDatePicker
                            id="date_input1"
                            placeholder="mm/dd/yyyy"
                            date={this.state.startDate}
                            focused={this.state.focused}
                            onDateChange={this.onDateChange}
                            onFocusChange={({ focused }) => this.setState({ focused })}
                          />

[jseminck]

There is example here: https://github.com/airbnb/react-dates/blob/8eca5d0aeb00e22e92a1232de923408572dd0e96/stories/SingleDatePicker_day.js#L48

isDayHighlighted should be a function. The parameter passed into the function is the day that needs to be checked (it should be a moment object), and the return value should be true or false.

[tandonrajiv]

I am confused between .
import { SingleDatePicker } from 'react-dates'
and import { SingleDatePickerWrapper } from 'react-dates'
components. They are same?

[jseminck]

SingleDatePickerWrapper is a wrapper around SingleDatePicker that seems to be used for the examples. You can see the code here: https://github.com/airbnb/react-dates/blob/master/examples/SingleDatePickerWrapper.jsx

It seems to just provide a bunch of default properties to SingleDatePicker

[tandonrajiv]

@jseminck Thanks for Your Suggestion.

[majapw]

@jseminck hit it on the head. The wrapper is there to show how to use the exported components. If you copy it over into your own project, it is a good starting point.

All of the modifier props (isOutsideRange, isDayBlocked, isDayHighlighted) take in a moment object and return true or false based on weather or not that day should have that class.

[lausellduane]

Hello there,

@majapw is it possible to highlight multiple dates using isDayHighlighted? I see in the storybook for DayPickerSingleDateController there is many dates highlighted in the month of July but I haven't found an explanation or an example on how to achieve this anywhere.

I have an array of moment objects and i want to pass it to isDayHighlighted to highlight all the elements of the array in the calendar. It works when it is a single moment object but how do you achieve it for an array of moment objects like in the storybook?

const start_date = this.state.maintenanceData.map((item) => { return moment(item.start_time).format('YYYY-MM-DD')});

isDayHighlighted={day => day.isSame( start_date, 'day' )}

Thanks in advance..

[majapw]

@lausellduane It's generally a better idea to open a new issue than comment an a closed issue! :)

That being said, you can accomplish what you want by storing your highlighted days in a Set or other data structure and then checking for presence in that object rather than checking for equality, e.g. isDayHighlighted={day => highlightedDays.has(day.format('YYYY-MM-DD'))}. It's probably a good idea to store strings rather than moment objects since two moment objects for the same day may be different instances.

[lausellduane]

Thanks it worked!

Yea will do next time. I commented here because I though it was gonna be easier for you to find.

Sorry I find the documentation very vague in the matter but do you know or could you point me in the right direction of how i can style the css for that highlight? I mean changing the background color or even inserting emojis like in one of the storybook examples?