使用jQuery Datepicker禁用日期数组失效：日期无法禁用

我之前也碰到过类似的问题，大概率是日期格式不匹配或者beforeShowDay的写法有问题，下面给你一步步解决的方案：

1. 先确认日期数组的格式一致性 #

从数据库拿到的日期通常是字符串格式（比如"2024-05-20"），但jQuery UI Datepicker传递给beforeShowDay的是原生JavaScript Date对象，所以必须统一比对的格式，否则会匹配失败。

假设你的数据库返回的日期数组是这样的：

// 示例：从数据库获取的禁用日期数组（字符串格式）
var disabledDates = ["2024-05-20", "2024-05-22", "2024-05-25"];

2. 正确实现beforeShowDay回调函数 #

这个函数是Datepicker用来判断每个日期是否可选的核心，我们需要把Date对象转换成和数组里一致的字符串格式，再做比对：

$(function() {
  // 辅助函数：把Date对象格式化为"YYYY-MM-DD"字符串
  function formatDate(date) {
    const year = date.getFullYear();
    // 月份从0开始，所以要+1，并且补零保证两位
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  // 初始化Datepicker
  $("#reservation").datepicker({
    beforeShowDay: function(date) {
      const currentDateStr = formatDate(date);
      // 检查当前日期是否在禁用数组中
      const isDisabled = disabledDates.includes(currentDateStr);
      
      // 返回值规则：[是否允许选择, 自定义CSS类名, 悬停提示文本]
      return [!isDisabled, isDisabled ? 'disabled-date' : '', isDisabled ? '该日期不可预约' : ''];
    }
  });
});

3. 常见问题排查 #

• 忘记等待DOM加载完成：一定要把初始化代码放在$(function(){})里，否则页面还没加载到#reservation输入框，代码就执行了，自然绑定失败。
• 日期格式不一致：比如数据库返回的是"2024/05/20"或者"2024-5-20"，那你的格式化函数也要对应调整，保证和数组里的字符串完全一致。
• 数组元素有格式错误：比如多余的空格、大小写问题（虽然日期一般不会有，但也要注意），可以先打印数组确认内容。

4. 可选：给禁用日期加样式 #

为了让用户更直观看到禁用日期，可以加个CSS样式：

.disabled-date {
  background-color: #f0f0f0 !important;
  color: #999 !important;
  cursor: not-allowed !important;
}

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