Highlighting weekend days (sat and sun) in Material UI date picker

问题

I have requirement wherein i want my date picker to highlight weekend days i.e saturday and sunday. I have been using material-Ui-datepicker https://material-ui-pickers.dev/demo/datepicker. I tried various way but not working. Please anyone can help me on this?

回答1:

You can use renderDay prop. It allows customizing any day.

Here is an official example of how to change displaying of random day. You basically need to change the appearance for weekends. https://material-ui-pickers.dev/demo/datepicker#customization

Example of function for v3

renderDay={(day, selected, dayComponent) => { 
  if (isWeekend(day)) {
    return React.cloneElemnt(dayComponent, { className: 'your-css' })
  } 

  return dayComponent
}

Example of function for v4

renderDay={(day, selected, DayProps) => { 
  if (isWeekend(day)) {
    return <Day {...DayProps} className={clsx(DayProps.classname, 'your-css')} /> 
  } 

  return <Day {...DayProps} />
}

来源：https://stackoverflow.com/questions/61502954/highlighting-weekend-days-sat-and-sun-in-material-ui-date-picker