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

问题描述

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

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?

推荐答案

您可以使用 renderDay 道具.它允许自定义任何一天.

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

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

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

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} />
}

这篇关于在Material UI日期选择器中突出显示周末(周六和周日)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！