disabledDate 函数是唯一可靠入口,自2.9.8版起支持,需判空、用时间戳查Set、按顺序执行周末/节假日等判断,禁用逻辑须集中于此函数内。
disabledDate 函数是唯一可靠入口
laydate 从 2.9.8 版本起才正式支持 disableddate,低版本(比如 2.8.x 及更早)压根不识别这个配置项,写了也白写。别指望靠 css 类名手动加 laydate-disabled 来“模拟”禁用——那只是视觉遮盖,用户仍能点、能回填、能绕过校验。
这个函数会在每次渲染日历单元格时被调用,传入一个 Date 实例(注意:不是字符串),你只需返回 true 表示禁用当天,false 或 undefined 表示可用。
- 必须判空:
if (!date) return false,否则初始化或清空时会报错中断逻辑 - 只对
type: 'date'和type: 'datetime'生效,time、year、month类型下完全不触发 - 函数内避免同步查接口、遍历大数组、new Date() 多次——它执行频率极高,卡顿直接体现在日历展开延迟上
禁用指定日期(如节假日、会议日)怎么写
最稳的方式是提前把不可选日期转成时间戳 Set,避免每次调用都做字符串解析或 new Date():
const forbiddenDates = new Set([
new Date('2026-04-04').getTime(), // 清明节
new Date('2026-05-01').getTime(), // 劳动节
new Date('2026-10-01').getTime(), // 国庆
]);
laydate.render({
elem: '#date',
disabledDate: function(date) {
if (!date) return false;
return forbiddenDates.has(date.getTime());
}
});
- 别用
arr.includes(date.toISOString().split('T')[0])这类字符串匹配——时区偏移会导致toISOString()生成的日期和用户本地显示不一致 - 如果日期来自后端 API,务必统一用时间戳或标准 ISO 格式(
YYYY-MM-DD)传输,前端再转getTime() - 动态更新禁用列表?改完
forbiddenDates后,必须调ins.reload(),否则日历不会重算
禁用周末或某一天(比如周一)的常见坑
用 date.getDay() 判断周几是正解,但容易栽在两个地方:
-
getDay()返回 0 是周日,6 是周六,1 才是周一——别把date.getDay() === 1写成=== 2 - 千万别在函数里写
new Date().getDay(),那是当前时间的星期,不是待渲染的date参数 - 国际化不影响判断逻辑:即使你设了周起始为周一,
getDay()仍是 JS 原生规则(周日=0),无需额外转换
禁用周一的最小可用写法:
disabledDate: function(date) {
if (!date) return false;
return date.getDay() === 1; // 周一
}
多个禁用条件共存时顺序很重要
所有逻辑必须塞进同一个 disabledDate 函数里,不能拆成多个回调。执行顺序直接影响可维护性和性能:
- 第一层永远是空值检查:
if (!date) return false - 第二层建议放高频、低开销判断(比如周末、工作日)
- 第三层再放依赖外部数据的判断(比如节假日 Set 查找、地区联动逻辑)
- 一旦某个条件命中禁用,直接
return true,别等后面逻辑跑完
当前时间是 2026 年 4 月 21 日(周二),如果你的禁用逻辑里混用了 new Date() 而没缓存,又没考虑时区,那么在 UTC+8 以外的机器上,某些边界日期(比如 4 月 1 日凌晨)可能被误判。时间戳才是跨时区唯一可信的标尺。


















