You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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 // 使用合并后的校验函数
    });
});

关键说明

  1. 禁用过去日期:直接通过minDate: 0实现,这是Datepicker自带的参数,无需额外函数判断。
  2. 合并校验逻辑:
    • 先判断当前日期是否为周六,不是则直接返回[false]禁用。
    • 再把当前日期格式化为和disableddates一致的dd-mm-yyyy格式(注意补零,比如5月要转成05,避免5和05不匹配的问题),然后检查是否在禁用数组中。
  3. 格式一致性修复:你原来的代码中日期格式转换和数组格式不匹配(数组是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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 03:23:52