如何使用JavaScript修改日历组件的可选起始与结束日期范围

实现思路 #

• 先定义全局的可选日期边界常量，统一管理起止时间
• 限制月份切换操作，禁止切换到起止范围外的年月
• 渲染日期时标记超出范围的日期为禁用状态，避免误选
• 选中日期时新增范围校验，非法日期不写入输入框

具体修改步骤 #

1. 新增全局日期边界配置 #

在你现有JS代码的最顶部添加以下代码，统一管理可选范围：

// 定义日历可选日期范围，月份为0索引，0=1月，11=12月
const MIN_DATE = new Date(2021, 0, 1);
const MAX_DATE = new Date(2030, 11, 31);

2. 限制月份切换功能 #

修改你现有代码中的prevMo（上月）和nextMo（下月）函数，增加边界判断，示例逻辑如下：

// 示例：修改nextMo函数，禁止切换到2030年12月之后的月份
function nextMo() {
  let nextYear = currentYear;
  let nextMonth = currentMonth + 1;
  if (nextMonth > 11) {
    nextMonth = 0;
    nextYear++;
  }
  // 下个月超出最大日期范围，直接返回不切换
  if (new Date(nextYear, nextMonth, 1) > MAX_DATE) {
    return;
  }
  // 原有切换月份的逻辑保留
  currentYear = nextYear;
  currentMonth = nextMonth;
  renderCalendar(); // 原有渲染日历的方法
}

// 示例：修改prevMo函数，禁止切换到2021年1月之前的月份
function prevMo() {
  let prevYear = currentYear;
  let prevMonth = currentMonth - 1;
  if (prevMonth < 0) {
    prevMonth = 11;
    prevYear--;
  }
  // 上个月小于最小日期范围，直接返回不切换
  if (new Date(prevYear, prevMonth + 1, 0) < MIN_DATE) {
    return;
  }
  // 原有切换月份的逻辑保留
  currentYear = prevYear;
  currentMonth = prevMonth;
  renderCalendar(); // 原有渲染日历的方法
}

3. 修改日期单元格绑定逻辑，跳过禁用日期 #

调整你提供的createEventListeners函数中日期单元格的事件绑定逻辑，仅给合法日期绑定点击事件：

function createEventListeners() {
  var dateField = document.getElementById("tripDate");
  if (dateField.addEventListener) {
    dateField.addEventListener("click", displayCalendar, false);
  } else if (dateField.attachEvent) {
    dateField.attachEvent("onclick", displayCalendar);
  }

  var dateCells = document.getElementsByTagName("td");
  if (dateCells[0].addEventListener) {
    for (var i = 0; i < dateCells.length; i++) {
      // 新增判断：跳过标记为禁用的日期单元格
      if(dateCells[i].classList.contains('disabled')) continue;
      dateCells[i].addEventListener("click", selectDate, false);
    }
  } else if (dateCells[0].attachEvent) {
    for (var i = 0; i < dateCells.length; i++) {
      // 新增判断：跳过标记为禁用的日期单元格
      if(dateCells[i].classList.contains('disabled')) continue;
      dateCells[i].attachEvent("onclick", selectDate);
    }
  }

  var closeButton = document.getElementById("close");
  if (closeButton.addEventListener) {
    closeButton.addEventListener("click", hideCalendar, false);
  } else if (closeButton.attachEvent) {
    closeButton.attachEvent("onclick", hideCalendar);
  }

  var prevLink = document.getElementById("prev");
  var nextLink = document.getElementById("next");
  if (prevLink.addEventListener) {
    prevLink.addEventListener("click", prevMo, false);
    nextLink.addEventListener("click", nextMo, false);
  } else if (prevLink.attachEvent) {
    prevLink.attachEvent("onclick", prevMo);
    nextLink.attachEvent("onclick", nextMo);
  }
}

if (window.addEventListener) {
  window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", createEventListeners);
}

4. 新增日期选中校验 #

修改selectDate函数，选中日期时先判断是否在合法范围内：

function selectDate(e) {
  const selectedDate = new Date(currentYear, currentMonth, parseInt(e.target.innerText));
  // 日期超出范围直接返回
  if (selectedDate < MIN_DATE || selectedDate > MAX_DATE) {
    return;
  }
  // 原有给输入框赋值、隐藏日历的逻辑保留
  document.getElementById('tripDate').value = `${currentYear}-${String(currentMonth+1).padStart(2,'0')}-${String(selectedDate.getDate()).padStart(2,'0')}`;
  hideCalendar();
}

5. 可选优化：渲染日期时标记禁用状态 #

在你原有的渲染日历单元格的逻辑中，对超出范围的日期添加disabled类，设置灰色样式提示用户不可选，示例逻辑：

// 渲染每个日期单元格时增加判断
if (currentCellDate < MIN_DATE || currentCellDate > MAX_DATE) {
  cell.classList.add('disabled');
}

对应CSS样式参考：

td.disabled {
  color: #ccc;
  cursor: not-allowed;
}

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