怎么让年月日三级联动js插件教程

function createCalendar(yearSelect, monthSelect, daySelect) {
  //  获取年份范围，你可以根据需求修改
  const years = Array.from({ length: 100 }, (_, i) => 2024 - 50 + i);

  //  填充年份下拉框
  years.forEach(year => {
    const option = document.createElement('option');
    option.value = year;
    option.text = year;
    yearSelect.appendChild(option);
  });

  //  年份变化事件监听器
  yearSelect.addEventListener('change', () => {
    updateMonth(yearSelect.value);
  });

  //  更新月份下拉框
  function updateMonth(year) {
    //  清除之前的月份选项
    monthSelect.innerHTML = '';

    //  根据年份获取月份数量 (闰年处理)
    const monthCount = isLeap(year) ? 12 : 12;  // 这里简化了闰年的处理，实际应用中可能更复杂

    //  填充月份下拉框
    for (let i = 1; i <= monthCount; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.text = i;
      monthSelect.appendChild(option);
    }
    // 更新日期
    updateDay(year, monthSelect.value);
  }


  //  更新日期下拉框
  function updateDay(year, month) {
    //  清除之前的日期选项
    daySelect.innerHTML = '';

    //  根据年份和月份获取日期数量
    const dayCount = getDaysInMonth(year, month);

    //  填充日期下拉框
    for (let i = 1; i <= dayCount; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.text = i;
      daySelect.appendChild(option);
    }
  }


  //  辅助函数：判断闰年
  function isLeap(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  }

  //  辅助函数：获取指定月份的天数
  function getDaysInMonth(year, month) {
    return new Date(year, month, 0).getDate();
  }

  // 初始化
  updateMonth(years[0]);  // 初始化月份
}

//  使用方法:  假设你的三个下拉框的id分别是 year, month, day
const yearSelect = document.getElementById('year');
const monthSelect = document.getElementById('month');
const daySelect = document.getElementById('day');
createCalendar(yearSelect, monthSelect, daySelect);