如何检查Bootstrap Datepicker中的日期是否禁用？含表单场景

嘿，我来帮你搞定这个问题！根据你用Bootstrap Datepicker的场景，有几种不同的方式来判断某个日期是否处于禁用状态，我分情况给你讲清楚：

1. 如果你用datesDisabled数组设置禁用日期 #

如果初始化Datepicker时是通过datesDisabled选项直接指定了禁用的日期列表，那可以直接获取这个数组并对比目标日期：

// 先假设你的Datepicker初始化代码是这样的
$('#from-date').datepicker({
  datesDisabled: ['2024-05-20', '2024-05-21'], // 预定义禁用的日期
  format: 'yyyy-mm-dd' // 日期格式要统一
});

// 封装一个检查函数
function isTargetDateDisabled(inputId, targetDate) {
  // 获取Datepicker实例
  const datepickerInstance = $(`#${inputId}`).data('datepicker');
  // 有些Bootstrap版本可能需要用data('bs.datepicker')，如果上面不行就换这个
  // const datepickerInstance = $(`#${inputId}`).data('bs.datepicker');
  
  // 获取禁用日期数组
  const disabledDatesList = datepickerInstance.options.datesDisabled;
  // 把目标日期转换成和配置一致的格式
  const formattedTargetDate = datepickerInstance.formatDate(
    datepickerInstance.options.format,
    targetDate
  );
  
  // 检查是否在禁用列表里
  return disabledDatesList.includes(formattedTargetDate);
}

// 使用示例：检查2024-05-20是否禁用
const testDate = new Date('2024-05-20');
console.log(isTargetDateDisabled('from-date', testDate)); // 输出 true

2. 如果你用beforeShowDay自定义禁用规则 #

如果是通过beforeShowDay函数来实现复杂的禁用逻辑（比如你提到的排除周末，或者其他自定义规则），可以直接调用这个函数来判断：

// 初始化Datepicker时的自定义禁用逻辑
$('#from-date').datepicker({
  beforeShowDay: function(date) {
    const dayOfWeek = date.getDay();
    // 禁用周六(6)、周日(0)，再加一个特定日期
    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
    const isSpecialDisabledDate = date.toISOString().split('T')[0] === '2024-05-20';
    
    // 返回数组第一个元素是是否可用的布尔值
    return [!isWeekend && !isSpecialDisabledDate];
  },
  format: 'yyyy-mm-dd'
});

// 检查函数
function isTargetDateDisabled(inputId, targetDate) {
  const datepickerInstance = $(`#${inputId}`).data('datepicker');
  // 调用beforeShowDay方法，拿到返回的数组
  const [isDateEnabled] = datepickerInstance.options.beforeShowDay(targetDate);
  
  // 返回是否禁用的结果
  return !isDateEnabled;
}

// 使用示例
const weekendTestDate = new Date('2024-05-25'); // 周六
console.log(isTargetDateDisabled('from-date', weekendTestDate)); // 输出 true
const normalDate = new Date('2024-05-22'); // 周四
console.log(isTargetDateDisabled('from-date', normalDate)); // 输出 false

3. 检查当前选中的日期是否禁用 #

如果想验证用户已经选中的日期是不是禁用状态，可以结合上面的函数，先获取选中的日期再检查：

// 获取from-date当前选中的日期
const selectedDate = $('#from-date').datepicker('getDate');
if (selectedDate) {
  const isDisabled = isTargetDateDisabled('from-date', selectedDate);
  console.log(`当前选中的日期是否禁用：${isDisabled}`);
}

注意：不同版本的Bootstrap Datepicker可能在API细节上略有差异，如果data('datepicker')获取不到实例，试试换成data('bs.datepicker')，这是Bootstrap 4+版本里的命名方式。

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