如何在Materialize CSS中禁用日期选择器指定区间内的日期

所有日期选择器的日期禁用能力，核心都是暴露一个日期判断回调：组件渲染每个日期单元格时，会把当前日期传入这个回调，回调返回true则该日期置为不可选状态，返回false则正常可选。要实现2022-07-07至2022-07-28区间的日期禁用，只需要在回调里判断当前日期是否落在目标区间内即可。

通用判断逻辑 #

为了避免时区、时分秒精度导致的边界判断错误，对比前需要把所有日期统一重置为当日0点的时间戳再做比较：

// 定义禁用区间的首尾时间，统一重置为0点消除时分秒干扰
const disableRangeStart = new Date('2022-07-07').setHours(0, 0, 0, 0);
const disableRangeEnd = new Date('2022-07-28').setHours(0, 0, 0, 0);

/**
 * 日期禁用判断函数
 * @param {Date|string|number} current 组件传入的待判断日期
 * @returns {boolean} true=禁用 false=可选
 */
function checkDisabled(current) {
  const currentTs = new Date(current).setHours(0, 0, 0, 0);
  return currentTs >= disableRangeStart && currentTs <= disableRangeEnd;
}

注意：如果省略重置0点的步骤，部分场景下日期对象自带的时分秒、时区偏移会导致边界日期判断失效，比如2022-07-07 02:00的时间戳会大于部分时区下new Date('2022-07-07')生成的默认时间戳，导致本该禁用的日期漏判。

主流组件库配置示例 #

Element UI / Element Plus #

把上述判断函数直接传入组件的disabledDate属性即可：

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    placeholder="请选择日期"
    :disabled-date="checkDisabled"
  />
</template>

<script setup>
import { ref } from 'vue'
const selectedDate = ref('')
const checkDisabled = (current) => {
  const disableRangeStart = new Date('2022-07-07').setHours(0, 0, 0, 0)
  const disableRangeEnd = new Date('2022-07-28').setHours(0, 0, 0, 0)
  const currentTs = new Date(current).setHours(0, 0, 0, 0)
  return currentTs >= disableRangeStart && currentTs <= disableRangeEnd
}
</script>

Ant Design / Ant Design Vue #

组件的disabledDate属性逻辑完全一致，直接复用判断函数即可，单日期选择器、范围选择器通用：

import { DatePicker } from 'antd'

const checkDisabled = (current) => {
  const disableRangeStart = new Date('2022-07-07').setHours(0, 0, 0, 0)
  const disableRangeEnd = new Date('2022-07-28').setHours(0, 0, 0, 0)
  const currentTs = new Date(current).setHours(0, 0, 0, 0)
  return currentTs >= disableRangeStart && currentTs <= disableRangeEnd
}

// 单日期选择器
<DatePicker disabledDate={checkDisabled} />
// 日期范围选择器
<DatePicker.RangePicker disabledDate={checkDisabled} />

原生JS自定义日期选择器/小程序picker #

如果是自己实现的日期面板，在渲染每个日期单元格的时候，调用checkDisabled函数，给返回true的单元格加上禁用样式、绑定拦截点击事件即可；如果是小程序原生picker这类没有提供禁用回调的组件，可以在日期选中的回调里做二次校验，选中值在禁用区间内就弹出提示，不更新绑定值。

常见踩坑点 #

• 不要直接用字符串做日期大小比较，类似current >= '2022-07-07'的写法在低版本浏览器、跨时区场景下大概率出现判断错误，必须转时间戳对比
• 要禁用多个不连续的日期区间时，只需要在判断函数里追加多个区间的判断逻辑，任意区间匹配就返回true即可
• 如果需求是只允许选择指定区间内的日期（也就是禁用区间外的所有日期），只需要把判断条件反向，返回currentTs < disableRangeStart || currentTs > disableRangeEnd即可

内容的提问来源于stack exchange，提问作者Abhijeet Gupta