如何在Melt UI日历中禁用多个指定日期？

核心思路 #

把需要禁用的日期整理成统一格式的数组，在isDateDisabled回调函数里判断当前日期是否属于这个数组即可。

实现方案 #

1. 定义禁用日期数组

可以选择两种格式存储禁用日期，按需挑选：

// 方式1：字符串格式（写法简洁，推荐）
const holidays = ['2024-12-25', '2024-12-30', '2025-01-01'];

// 方式2：CalendarDate对象格式（类型更安全）
const holidays = [
  new CalendarDate(2024, 12, 25),
  new CalendarDate(2024, 12, 30),
  new CalendarDate(2025, 1, 1)
];

2. 修改isDateDisabled回调

根据你选择的数组格式，编写对应的判断逻辑：

对应字符串数组的写法

const {
  elements: { calendar, heading, grid, cell, prevButton, nextButton },
  states: { months, headingValue, weekdays },
  helpers: { isDateDisabled, isDateUnavailable }
} = createCalendar({
  defaultValue: new CalendarDate(year, month, day),
  locale: 'ph',
  fixedWeeks: true,
  isDateUnavailable: (date) => {
    return isWeekend(date, 'en')
  },
  isDateDisabled: (date) => {
    // 将当前日期转为和数组一致的YYYY-MM-DD格式
    const currentDateStr = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
    // 判断当前日期是否在禁用列表中
    return holidays.includes(currentDateStr);
  }
});

对应CalendarDate对象数组的写法

const {
  elements: { calendar, heading, grid, cell, prevButton, nextButton },
  states: { months, headingValue, weekdays },
  helpers: { isDateDisabled, isDateUnavailable }
} = createCalendar({
  defaultValue: new CalendarDate(year, month, day),
  locale: 'ph',
  fixedWeeks: true,
  isDateUnavailable: (date) => {
    return isWeekend(date, 'en')
  },
  isDateDisabled: (date) => {
    // 比对年、月、日是否完全匹配数组中的任意一项
    return holidays.some(holiday => 
      holiday.year === date.year && 
      holiday.month === date.month && 
      holiday.day === date.day
    );
  }
});

3. 混合禁用逻辑（可选）

如果需要同时保留之前的单个日期禁用规则（比如禁用每月1号），直接用逻辑或||拼接条件：

isDateDisabled: (date) => {
  const currentDateStr = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
  // 同时禁用节假日数组中的日期和每月1号
  return holidays.includes(currentDateStr) || date.day === 1;
}

内容的提问来源于stack exchange，提问作者User-Suuro