如何不重建JQuery UI Datepicker修改beforeShowDay属性

完全可以不用销毁并重建Datepicker来修改beforeShowDay属性！jQuery UI提供了option方法来动态更新已初始化的Datepicker配置，我们可以利用这一点，结合全局变量来灵活控制日期禁用逻辑，同时实现你要的两个功能：显示/隐藏周末、禁用特定星期几。

核心思路 #

1. 用一个组合验证函数替代单一的disableExcludedDates，同时处理固定排除日期和动态禁用的特定星期几。
2. 通过全局变量存储动态禁用的星期几，修改变量后刷新Datepicker即可生效。
3. 优化周末显示/隐藏的逻辑，避免重复绑定事件，确保每次弹出Datepicker都能正确应用状态。

修改后的完整代码 #

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="myDatePicker">
<button onclick="weekends(true)">Show Weekends</button>
<button onclick="weekends(false)">Hide Weekends</button>
<br />
<input type="text" id="dayNumber" placeholder="Digit 0-6 (0=Sunday)">
<button onclick="disableSpecificDay()">Disable Specific Day</button>

CSS

br { line-height: 150%; }
button, input { width: 130px; }

JavaScript

var myPicker = $("#myDatePicker");
var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"];
var dayToDisable = null; // 存储要禁用的星期几（0=周日，1=周一...6=周六）

// 组合验证函数：同时处理固定排除日期和动态禁用的星期几
function validateDate(date) {
    // 优先检查是否要禁用特定星期几
    if (dayToDisable !== null && date.getDay() === dayToDisable) {
        return [false];
    }
    // 检查是否在固定排除日期列表中
    for (var i = 0; i < excludeDates.length; i++) {
        if (new Date(excludeDates[i]).toString() === date.toString()) {
            return [false];
        }
    }
    return [true];
}

// 控制周末显示/隐藏
function weekends(action) {
    // 绑定beforeShow事件，确保每次弹出Datepicker都应用状态
    myPicker.datepicker('option', 'beforeShow', function() {
        setTimeout(function() {
            $(".ui-datepicker-week-end").toggle(action);
        }, 0); // 延迟执行确保Datepicker DOM已渲染
    });
    // 立即更新当前显示的Datepicker（如果已打开）
    $(".ui-datepicker-week-end").toggle(action);
}

// 动态禁用/启用特定星期几
function disableSpecificDay() {
    var dayNumber = parseInt($("#dayNumber").val(), 10);
    // 验证输入是否为0-6的有效星期几
    if (!isNaN(dayNumber) && dayNumber >= 0 && dayNumber <= 6) {
        dayToDisable = dayNumber;
    } else {
        dayToDisable = null; // 输入无效则取消禁用
    }
    // 更新beforeShowDay选项（即使函数没变，刷新一下确保状态生效）
    myPicker.datepicker('option', 'beforeShowDay', validateDate);
    // 如果Datepicker正处于打开状态，刷新它
    if ($(".ui-datepicker").is(":visible")) {
        myPicker.datepicker('refresh');
    }
}

// 初始化Datepicker
$(function() {
    myPicker.datepicker( {
        numberOfMonths: 1,
        firstDay: 1,
        dateFormat: "dd/mm/yy",
        beforeShowDay: validateDate
    });
});

关键细节解释 #

• 动态修改beforeShowDay：通过myPicker.datepicker('option', 'beforeShowDay', validateDate)，我们可以直接替换或更新日期验证逻辑，无需销毁重建Datepicker。这里我们用了同一个函数，通过修改全局变量dayToDisable来动态改变验证规则，更灵活。
• 刷新Datepicker：当修改验证规则后，如果Datepicker正处于打开状态，调用datepicker('refresh')可以立即更新界面，让禁用的日期马上变灰。
• 周末显示/隐藏优化：原来的focus/blur绑定可能会重复添加事件，改用beforeShow事件确保每次弹出Datepicker都能正确执行显示/隐藏操作，同时用toggle(action)简化代码。

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