[DatePicker] should have css class for weekend days and header to style them separate

[FalkNisius]

If you wan't highlight saturdays and sundays (weekends) or some special days then is there no way for doing that in the usage of the component.

I would prefer to add a css class to the buttons represent the days and the spans represent weekday headers.

For more flexibility and including holiday etc. the highlighted days should be also added with a function like shouldDisableDay.

[henrymoews]

I just wanted to find a solution for the same problem. I did not find a solution elsewhere so I decided to implement a patch that you find a attached.

After applying the patch from the root folder (that contains the node_modules folder) with patch -s -p0 < patches/datePicker_highlightedDays.diff the component offers two more props.

There already was a prop to disable any date so I decided to add a prop to highlight any date the same way:

isWeekendDay(date) {
   return date.getDay() === 0 || date.getDay() === 6;
}

render(){
   return (
      <DatePicker shouldHighlightDate={this.isWeekendDay} />
   )
}

To highlight the weekdays title ('M', 'T', 'W', 'T', 'F', 'S', 'S') as well you can use the highlightedWeekTitleDays property that accepts an array with weekday indices from Sunday = 0 to Saturday = 6. This highlights only Saturday and Sunday:

<DatePicker highlightedWeekTitleDays={[0, 6]} />

Here is the patch. It was made for [email protected]:

datePicker_highlightedDays.diff.zip

[oliviertassinari]

Closing for #4787