jQuery UI Datepicker设置日期前如何判断日期是否为禁用状态

你可以通过复用Datepicker内部的日期校验规则，遍历候选预约日期找到首个可用项后再触发选中，不需要额外维护一份禁用日期列表。

核心实现逻辑 #

1. 日期禁用状态判断工具方法 #

jQuery UI Datepicker的禁用状态由两部分规则决定：一是minDate/maxDate设置的可选范围边界，二是beforeShowDay回调返回的自定义禁用规则（也就是你用来标记教师不可预约时段的配置），下面的工具方法可以直接复用组件内置逻辑判断状态：

function isDateDisabled($datepicker, dateInput) {
  const dpInstance = $datepicker.data('datepicker');
  if (!dpInstance) return true;
  // 统一转换为Date对象，兼容字符串传参
  const targetDate = dateInput instanceof Date ? dateInput : new Date(dateInput);

  try {
    // 校验日期是否在可选范围内，不合法会抛出异常
    dpInstance._checkDate(targetDate);
    // 读取自定义日期规则返回值，数组第一项为false代表日期禁用
    const dayStatus = dpInstance._defaults.beforeShowDay.call($datepicker[0], targetDate);
    return !dayStatus[0];
  } catch (err) {
    return true;
  }
}

2. 遍历候选日期选中首个可用项 #

拿到符合周规则的日期数组后，逐个校验状态，找到第一个非禁用日期再调用setDate即可：

// 预先检索得到的所有符合周规则的候选日期
const all_dates = ['07/25/22', '08/01/22', '08/08/22', '08/15/22', '08/22/22', '08/29/22', '09/05/22', '09/12/22', '09/19/22'];
const $bookingCal = $('#booking_calender');

// 查找第一个可预约日期
let selectableDate = null;
for (const date of all_dates) {
  if (!isDateDisabled($bookingCal, date)) {
    selectableDate = date;
    break;
  }
}

if (selectableDate) {
  $bookingCal.datepicker('setDate', selectableDate);
} else {
  // 无可用日期时的自定义业务逻辑，比如提示用户更换范围
  console.log('所选时段内无可用预约名额');
}

效果参考 #

日历组件中被标记为禁用的不可预约日期样式如下：

注意事项 #

• 传入的日期字符串格式需要和Datepicker配置的dateFormat保持一致，避免日期解析偏差
• 如果教师可预约时段数据是异步接口拉取的，需要等待接口返回、日历禁用状态渲染完成后，再执行日期查找和选中逻辑，否则会出现判断不准的问题
• 该方法兼容所有Datepicker原生禁用规则，不需要单独维护额外的禁用日期列表

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