日期设置操作求助：无法实现目标效果，盼专业指导

以下是通用的年、月、日联动选择效果实现方案，可匹配多数日期设置需求：

1. 原生HTML+JavaScript实现 #

HTML结构 #

<div class="date-picker">
  <select id="year"></select>
  <select id="month"></select>
  <select id="day"></select>
</div>

JavaScript逻辑 #

// 填充年份选项（覆盖近20年范围）
const yearEl = document.getElementById('year');
const currentYear = new Date().getFullYear();
for (let y = currentYear - 10; y <= currentYear + 10; y++) {
  const opt = document.createElement('option');
  opt.value = y;
  opt.textContent = y;
  yearEl.appendChild(opt);
}

// 填充月份选项
const monthEl = document.getElementById('month');
for (let m = 1; m <= 12; m++) {
  const opt = document.createElement('option');
  opt.value = m;
  opt.textContent = m;
  monthEl.appendChild(opt);
}

// 根据年月计算当月天数
function getDays(year, month) {
  return new Date(year, month, 0).getDate();
}

// 更新日期选项
function refreshDays() {
  const dayEl = document.getElementById('day');
  const selectedYear = parseInt(yearEl.value);
  const selectedMonth = parseInt(monthEl.value);
  const totalDays = getDays(selectedYear, selectedMonth);
  
  dayEl.innerHTML = '';
  for (let d = 1; d <= totalDays; d++) {
    const opt = document.createElement('option');
    opt.value = d;
    opt.textContent = d;
    dayEl.appendChild(opt);
  }
}

// 监听年月变化，联动更新日期
yearEl.addEventListener('change', refreshDays);
monthEl.addEventListener('change', refreshDays);

// 初始化日期选项
refreshDays();

基础样式（可选） #

.date-picker select {
  padding: 6px 12px;
  margin: 0 5px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

2. UI框架快速实现（以Element UI为例） #

如果使用Vue技术栈，可直接用封装好的组件：

<el-date-picker
  v-model="selectedDate"
  type="date"
  placeholder="选择日期"
  format="yyyy-MM-dd">
</el-date-picker>

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