JS Datepicker如何同时禁用过去日期、非周六及指定日期?
解决方案:合并
beforeShowDay逻辑实现多重日期限制 当然可以实现!问题出在你试图给beforeShowDay传递两个函数,而它只接受一个函数作为参数。我们需要把周六判断和指定日期禁用的逻辑合并到同一个函数里,再结合minDate: 0禁用过去日期,就能实现你要的效果。
完整代码示例
$(document).ready(function(){ // 要禁用的指定日期数组(格式:dd-mm-yyyy) var disableddates = ["26-05-2018"]; // 合并后的日期校验函数 function checkAllowedDates(date) { // 1. 判断是否为周六(周六的getDay()返回6) var isSaturday = date.getDay() === 6; if (!isSaturday) { return [false]; // 非周六直接禁用 } // 2. 判断是否在禁用日期数组中 var day = String(date.getDate()).padStart(2, '0'); var month = String(date.getMonth() + 1).padStart(2, '0'); var year = date.getFullYear(); // 转换为和disableddates一致的dd-mm-yyyy格式 var currentDateStr = `${day}-${month}-${year}`; var isDisabled = disableddates.indexOf(currentDateStr) !== -1; if (isDisabled) { return [false]; // 在禁用数组中则禁用 } // 所有条件都满足,允许选择 return [true]; } // 初始化datepicker $("#aankomstdatum").datepicker({ dateFormat: "dd-mm-yy", numberOfMonths: 2, minDate: 0, // 禁用过去日期 beforeShowDay: checkAllowedDates // 使用合并后的校验函数 }); });
关键说明
- 禁用过去日期:直接通过
minDate: 0实现,这是Datepicker自带的参数,无需额外函数判断。 - 合并校验逻辑:
- 先判断当前日期是否为周六,不是则直接返回
[false]禁用。 - 再把当前日期格式化为和
disableddates一致的dd-mm-yyyy格式(注意补零,比如5月要转成05,避免5和05不匹配的问题),然后检查是否在禁用数组中。
- 先判断当前日期是否为周六,不是则直接返回
- 格式一致性修复:你原来的代码中日期格式转换和数组格式不匹配(数组是
dd-mm-yyyy,但转换后的是mm-dd-yyyy),这会导致指定日期无法被正确禁用,我们通过padStart(2, '0')补零并调整格式顺序解决了这个问题。
为什么你的组合写法出错?
你之前尝试的写法:
beforeShowDay: DisableSpecificDates, function(date){ var day = date.getDay(); return [day == 6]; }});
这里语法错误的原因是beforeShowDay只能接受一个值(函数或返回数组的表达式),不能同时传递两个函数。必须把两个逻辑合并到同一个函数里,才能让Datepicker正确执行所有校验。
内容的提问来源于stack exchange,提问作者Kevin Verhoeven
相关产品推荐
相关产品推荐

