在 Material UI 日期选择器中突出显示周末（周六和周日）

Question

我有一个要求，我希望我的日期选择器突出显示周末，即周六和周日。我一直在使用 material-Ui-datepicker https://material-ui-pickers.dev/demo/datepicker。我尝试了各种方法但没有工作。请问有人可以帮我吗？

Answer 1

你可以使用renderDay 属性。它允许自定义任何一天。

这是一个如何更改随机日期显示的官方示例。你基本上需要改变周末的外观。 https://material-ui-pickers.dev/demo/datepicker#customization

v3 的函数示例

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

  return dayComponent
}

v4 的函数示例

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

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