如何让beforeShowDay与jQuery datepicker正常配合工作？

核心问题有两个：

• 日期格式不匹配：beforeShowDay回调接收的是Date对象，而你的unavailableDates是'yyyy-mm-dd'格式的字符串，直接用indexOf肯定匹配不到。
• 配置方式冲突：你混用了DOM元素的min/max属性和datepicker自身的配置项，datepicker优先使用自身的minDate/maxDate配置，而非DOM属性。

正确实现步骤 #

1. 先写一个工具函数，把Date对象转换成'yyyy-mm-dd'格式的字符串，确保和禁用日期数组的格式完全一致：

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1并补零
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

2. 统一在datepicker的初始化配置中设置所有参数，不要分开调用或混用DOM属性：

// 假设minDate、maxDate为'yyyy-mm-dd'格式字符串，也可以直接传入Date对象
const minDate = '2022-08-05';
const maxDate = '2023-01-29';
const unavailableDates = ["2022-08-06","2022-08-07","2022-08-12"];

calendar.datepicker({
  minDate: minDate,
  maxDate: maxDate,
  beforeShowDay: function(date) {
    const formattedDate = formatDate(date);
    const isUnavailable = unavailableDates.indexOf(formattedDate) !== -1;
    // 返回数组：[是否可选, 自定义CSS类名, hover提示文本]
    return [!isUnavailable, '', isUnavailable ? '该日期不可预约' : ''];
  }
});

3. 关键注意点：

• 不要用calendar.attr('min', minDate)这种方式设置日期范围，datepicker不会监听DOM属性变化，必须通过自身配置项设置。
• 确保unavailableDates里的日期格式和formatDate输出完全一致，比如月份、日期必须是两位数字（如'08'而非'8'）。

之前写法失效的原因 #

• 第一种写法直接用Date对象匹配字符串数组，类型不匹配导致永远找不到，beforeShowDay返回全可选，覆盖了min/max的限制。
• 第二种写法用date.toDateString()得到的是"Sat Aug 06 2022"这类格式，和'yyyy-mm-dd'完全不匹配，无法正确识别禁用日期。

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