Material UI React Datepicker自定义禁用日期偏移错误如何解决

问题原因 #

1. 核心原因是toISOString()返回的是UTC 0时区的时间字符串，和你所在的本地时区存在时差，导致日期拆分后和你写的固定日期字符串匹配错位，出现1天的偏移。
2. 额外拼写错误：你定义的禁用函数名是disableWeekneds（少了一个字母e），和DatePicker组件传入的disableWeekends不一致，会导致函数不生效。

修复方案 #

直接用本地时区的日期拼接字符串即可，不要使用UTC时区的toISOString()结果做匹配，参考代码如下：

import { format } from 'date-fns' // 你已引入DateFnsUtils，可直接用date-fns工具方法

// 修正函数名拼写
function disableWeekends(date) {
  const datesToDisabled = ['2021-10-18', '2021-10-20']
  // 用date-fns格式化本地时区日期为yyyy-MM-dd格式，匹配你写的固定日期
  const isToDisabled = datesToDisabled.includes(format(date, 'yyyy-MM-dd'))
  // 周末判断用的getDay本身就是本地时区的，不需要修改
  return date.getDay() === 6 || date.getDay() === 0 || isToDisabled;
}

如果不想引入额外的date-fns方法，也可以手动拼接本地日期：

function disableWeekends(date) {
  const datesToDisabled = ['2021-10-18', '2021-10-20']
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const localDateStr = `${year}-${month}-${day}`
  const isToDisabled = datesToDisabled.includes(localDateStr)
  return date.getDay() === 6 || date.getDay() === 0 || isToDisabled;
}

内容的提问来源于stack exchange，提问作者C Sharper