如何在React Nice Dates的DatePickerCalendar中禁用指定日期？

实现步骤 #

• 核心逻辑通过组件的modifiers属性标记禁用日期，配合样式拦截点击操作，再在选择回调中做二次校验避免异常选中
• 定义禁用日期的判断逻辑，注意Date是引用类型，不能直接全等比对，需统一转为时间戳或相同格式的日期字符串做等值判断，避免时分秒、时区问题导致判断失效
• 在<DatePickerCalendar />组件的modifiers属性中传入disabled修饰符，绑定判断函数标记需要禁用的日期
• 配置modifiersStyles/modifiersClasses属性，给标记为disabled的日期添加不可交互的样式
• 在日期选择回调onDateChange中增加二次校验，避免用户通过键盘操作等异常场景选中禁用日期

代码示例 #

// 你的禁用日期数组
const disabledDates = [date1, date2, date3]

// 禁用日期判断函数
const isDateDisabled = (date) => {
  // 统一转为当天0点的时间戳比对，消除时分秒的影响
  const currentDateTs = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
  return disabledDates.some(item => {
    const disabledTs = new Date(item.getFullYear(), item.getMonth(), item.getDate()).getTime()
    return disabledTs === currentDateTs
  })
}

// 组件调用
<DatePickerCalendar
  // 保留你原来的其他属性：date、locale、minDate等
  modifiers={{
    disabled: isDateDisabled
  }}
  modifiersStyles={{
    disabled: {
      color: '#bfbfbf',
      cursor: 'not-allowed',
      pointerEvents: 'none'
    }
  }}
  onDateChange={(selectedDate) => {
    // 二次拦截校验
    if (selectedDate && isDateDisabled(selectedDate)) return
    // 原有选中后的赋值逻辑
    // setSelectedDate(selectedDate)
  }}
/>

注意事项 #

• 如果你的禁用日期是后端返回的字符串格式，需要先统一转为Date对象再做判断
• 如果需要同时禁用周六周日等规则，可以直接在isDateDisabled函数里增加对应的判断逻辑即可

内容的提问来源于stack exchange，提问作者Shahir Riaz