[DatePicker] should have css class for weekend days and header to style them separate
Closed this issue · 2 comments
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.
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 material-ui@0.15.0:
Closing for #4787