核心原理与实现要点
beforeShowDay 的作用
在 Datepicker 的渲染流程中，beforeShowDay 回调决定了某个日期是否可选。该回调接收一个 Date 对象，返回一个数组 [boolean, string, string]，其中布尔值表示是否可选，第二个参数可用于给日期添加 CSS class，第三个参数用于提示文本。
通过在回调中对比待渲染的日期与禁用集合，我们可以实现“禁用指定日期”的需求。关键点是 先把目标日期格式化为统一的字符串形式，例如 yy-mm-dd，再进行比较。
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);var disabledDates = ['2025-09-01', '2025-09-07']; // 静态禁用日期if ($.inArray(ymd, disabledDates) !== -1) {return [false, 'disabled-date', '该日期已禁用'];}return [true, '', ''];}
});在上面的示例中，禁用日期集合以静态数组形式存放，日期格式统一为 yy-mm-dd，确保跨月份/跨年的比较正确。
如果后续需要对禁用集合进行扩展，beforeShowDay 可以与任何数据源结合，例如服务器返回的列表、日期范围，或者缓存的集合，从而实现更灵活的禁用策略。
静态日期禁用的完整实现
方案一：静态日期数组
如果禁用日期固定且不需要动态加载，使用一个静态数组即可。维护简单、性能稳定，但需要在前端打点维护，将最新的禁用日期同步到代码中。
实现步骤：先将要禁用的日期列成数组，接着在 beforeShowDay 回调中逐一比对。为了提升可维护性，建议把日期数组放在一个单独的模块或常量文件。
// 静态禁用日期列表示例
var disabledDates = ['2025-09-01','2025-09-05','2025-09-10'
];$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);if ($.inArray(ymd, disabledDates) !== -1) {return [false, 'disabled-date', '不可选'];}return [true, '', ''];}
});在此实现中，禁用日期数组直接参与判断，返回值格式保持与 Datepicker 兼容，以便于样式与提示信息的定制。
如果需要对样式进行区分，可以在返回值中填充一个自定义 CSS class。例如：'disabled-date'，再在样式表中定义:
.disabled-date {color: #999;background-color: #f7f7f7;
}范围禁用与动态列表
方案二：禁用日期范围
除了单日禁用，还常见需要禁用一个日期区间。我们可以在 beforeShowDay 中把每个日期转换为字符串后与区间进行比较。日期范围可以是一个或多个区间数组。
实现思路是：将每一个禁用区间的 start 和 end 与当前遍历的日期进行比较，如果落在任一区间内，则禁用该日期。
var ranges = [{ start: '2025-09-02', end: '2025-09-07' },{ start: '2025-09-12', end: '2025-09-14' }
];$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);for (var i = 0; i < ranges.length; i++) {if (ymd >= ranges[i].start && ymd <= ranges[i].end) {return [false, 'range-disabled', '在禁用区间'];}}return [true, '', ''];}
});该方法的关键点是：将日期按同一格式排序后比较，并确保多区间的判断效率。可通过提前把区间排序或用二分查找优化性能。
若区间数据来自服务器，需要在获取后重新初始化控件，或动态更新 beforeShowDay 中的数据结构。
// 动态区间示例（初始化后更新 disabledRanges）
var ranges = [];function initDatePicker() {$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);for (var i = 0; i < ranges.length; i++) {if (ymd >= ranges[i].start && ymd <= ranges[i].end) {return [false, 'range-disabled', '禁用区间'];}}return [true, '', ''];}});
}// 停用后续数据更新
$.get('/api/disabled-ranges', function(res) {ranges = res.ranges; // [{start:'2025-09-02', end:'2025-09-07'}, ...]$('#datepicker').datepicker('destroy');initDatePicker();
});
方案三：异步获取禁用列表并缓存
当禁用日期来自服务端，建议在页面加载后利用 AJAX 获取列表，存入一个 Set，以 O(1) 的查找复杂度提升性能。Set 提供快速存在性检查。
var disabledSet = new Set();$.get('/api/disabled-dates', function(res){// res.dates: ['2025-09-03','2025-09-08', ...]disabledSet = new Set(res.dates);$('#datepicker').datepicker({ // 或者更新 optiondateFormat: 'yy-mm-dd',beforeShowDay: function(date){var ymd = $.datepicker.formatDate('yy-mm-dd', date);if (disabledSet.has(ymd)) {return [false, 'disabled-date', '不可选'];}return [true, '', ''];}});
});// CSS 类示例（已在上面说明如何应用）
注意：初始化时机要确保数据就绪，否则初始状态可能与后续数据不一致。可以在 AJAX 完成后再初始化，或在 beforeShowDay 中增加容错逻辑。
.disabled-date {background-color: #f5f5f5;color: #bbb;cursor: not-allowed;
}实战演练：多场景组合
场景A：工作日禁用特定节假日+周末仍可选
在实际业务中，可能需要同时禁用某些节假日，同时允许周末作为可选日期。这时可以把静态节假日清单与一个自定义的周末标记结合起来。核心思路是先校验节假日，再按需要决定是否禁用其他日期。
示例代码演示了将节假日放入静态数组，并对周末进行不禁用（或按需禁用）。
var holidays = ['2025-12-25','2025-12-31']; // 节假日日期$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);// 禁用节假日if ($.inArray(ymd, holidays) !== -1) {return [false, 'holiday', '节假日'];}// 示例：周末不禁用，只做样式提示var w = date.getDay(); // 0:周日, 6:周六if (w === 0 || w === 6) {return [true, 'weekend', '周末可选'];}return [true, '', ''];}
});这里的样式标记会在页面结合 CSS 进行视觉区分，帮助用户快速识别禁用与可选日期。
场景B：整合静态与动态禁用清单
有时需要同时应用静态禁用日期与从服务器动态获取的日期。可以将两者合并为一个判断逻辑，既保证性能又具备灵活性。
var staticDisabled = ['2025-09-01','2025-09-05'];
var dynamicDisabledSet = new Set();// 初始化
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd',beforeShowDay: function(date) {var ymd = $.datepicker.formatDate('yy-mm-dd', date);if ($.inArray(ymd, staticDisabled) !== -1) {return [false, 'disabled', '静态禁用'];}if (dynamicDisabledSet.has(ymd)) {return [false, 'disabled', '动态禁用'];}return [true, '', ''];}
});// 动态获取禁用日期
$.get('/api/disabled-dates', function(res){dynamicDisabledSet = new Set(res.dates);
});
常见坑与兼容性
兼容性与格式要点
在使用 Datepicker 时，务必统一日期格式为 yy-mm-dd，以避免跨月或跨年时的比较错误。返回值数组的第三个元素可以用作提示文本，增强可用性。
若页面存在多处日期输入框，建议把禁用逻辑抽成一个可复用的模块，便于维护与单元测试。通过对不同数据源实现统一的接口，可以快速切换禁用策略而不修改调用方代码。
在性能方面，对于大量禁用日期的场景，优先使用 Set 或 Map 进行快速查找，避免在 beforeShowDay 内进行高复杂度的线性搜索。
结尾说明（非总结性内容）
以上内容覆盖了在 jQuery Datepicker 中禁用指定日期的完整方法与实战案例，包含静态列表、范围禁用以及异步数据来源的实现细节。通过合理组织数据源和前端逻辑，可以实现高性能且易于维护的日期选择控件。
