如何在Moment.js日历中禁用过往日期及指定选中日期？

嘿，我来帮你搞定这个日历禁用日期的问题！从你给出的代码片段来看，核心问题应该是在生成日历日期单元格时，没有正确加入过往日期和指定禁用日期的判断逻辑，也没对这些日期做交互限制。

我给你梳理下具体的解决步骤，结合Moment.js的日期比较能力来实现：

第一步：提前准备好禁用配置 #

先定义好你要禁用的指定日期数组，同时把today变量处理成当天的起始时刻，避免时间部分干扰日期判断：

// 全局/Calendar类内定义：当天的起始时刻（避免因当前时间是下午，误判当天上午为过去）
const today = moment().startOf('day');
// 你要禁用的指定日期，统一用YYYY-MM-DD格式
const disabledDates = ['2024-05-12', '2024-05-18', '2024-05-25'];

第二步：在生成日期单元格时添加判断 #

在你的draw()方法里，循环生成每个日期元素的环节，加入禁用判断，给禁用的日期加样式+阻止交互：

// 假设你在循环生成日期的逻辑里（比如遍历当月的每一天）
for (let i = 0; i < daysInMonth; i++) {
  const cellDate = moment(this.current).add(i, 'days').startOf('day');
  const dateEl = document.createElement('div');
  dateEl.classList.add('day');
  // 给元素存日期字符串，方便后续点击判断
  dateEl.setAttribute('data-date', cellDate.format('YYYY-MM-DD'));

  // 判断是否为过往日期或指定禁用日期
  const isPastDate = cellDate.isBefore(today);
  const isSpecifiedDisabled = disabledDates.some(d => moment(d).isSame(cellDate, 'day'));

  if (isPastDate || isSpecifiedDisabled) {
    // 添加禁用样式，让用户直观识别
    dateEl.classList.add('disabled-day');
    // 阻止点击交互
    dateEl.style.pointerEvents = 'none';
    dateEl.style.opacity = '0.5';
    dateEl.style.cursor = 'not-allowed';
  }

  // 保留原有的today标记逻辑
  if (cellDate.isSame(today)) {
    dateEl.classList.add('today');
  }

  dateEl.textContent = cellDate.date();
  this.el.querySelector('.days').appendChild(dateEl);
}

第三步：在日期点击方法里加二次校验 #

为了防止用户通过其他方式触发（比如键盘），在你的openDay方法里也加一层判断：

openDay(el) {
  const clickedDateStr = el.getAttribute('data-date');
  const clickedDate = moment(clickedDateStr).startOf('day');

  // 二次校验是否禁用
  const isPast = clickedDate.isBefore(today);
  const isDisabled = disabledDates.some(d => moment(d).isSame(clickedDate, 'day'));
  
  if (isPast || isDisabled) {
    return; // 直接返回，不执行后续打开逻辑
  }

  // 你的原有打开日期逻辑...
}

补充样式建议 #

给禁用日期加个CSS样式，体验更好：

.disabled-day {
  background-color: #f5f5f5;
  color: #ccc;
}

这样修改后，就能完美禁用所有过往日期和你指定的日期啦～

内容的提问来源于stack exchange，提问作者K-Series