如何获知<input>日期元素按键操作时修改的是日/月/年值？

方法1：监听键盘事件+光标位置追踪修改字段 #

原生日期输入框（type="date"）在用户用上下箭头修改时，光标会定位在对应的年、月、日分段上。通过监听keydown事件捕获箭头操作，结合光标选中范围判断当前修改的是哪个字段，再在input事件中针对该字段处理无效日期。

示例代码：

const dateInput = document.getElementById('date-input');
let lastValidDate = dateInput.value ? new Date(dateInput.value) : new Date();

// 监听箭头按键，标记当前修改的字段
dateInput.addEventListener('keydown', (e) => {
  if (!['ArrowUp', 'ArrowDown'].includes(e.key)) return;
  
  const { selectionStart, value } = e.target;
  let modifiedPart = '';
  
  // 基于YYYY-MM-DD的格式判断字段位置
  if (selectionStart <= 3) modifiedPart = 'year';
  else if (selectionStart >= 5 && selectionStart <= 6) modifiedPart = 'month';
  else if (selectionStart >= 8) modifiedPart = 'day';
  
  e.target.dataset.modifiedPart = modifiedPart;
});

// 处理输入后的无效日期
dateInput.addEventListener('input', (e) => {
  const currentValue = e.target.value;
  const modifiedPart = e.target.dataset.modifiedPart;
  
  if (!currentValue && modifiedPart) {
    const adjustDirection = e.key === 'ArrowUp' ? 1 : -1;
    const newDate = new Date(lastValidDate);
    
    switch (modifiedPart) {
      case 'year':
        // 修改年份导致无效（如2020-02-29改到非闰年），调整到当月最后一天
        newDate.setFullYear(newDate.getFullYear() + adjustDirection);
        newDate.setDate(0); // 自动转为当月最后一天
        break;
      case 'month':
        // 修改月份导致无效（如1月31改到2月），调整到当月最后一天
        newDate.setMonth(newDate.getMonth() + adjustDirection);
        newDate.setDate(0);
        break;
      case 'day':
        // 修改日期导致无效，调整到当月1日
        newDate.setDate(1);
        break;
    }
    
    e.target.value = newDate.toISOString().split('T')[0];
    lastValidDate = newDate;
  } else if (currentValue) {
    lastValidDate = new Date(currentValue);
  }
  
  delete e.target.dataset.modifiedPart;
});

方法2：使用自定义日期组件完全掌控逻辑 #

如果原生输入框的限制无法满足需求，直接拆分年、月、日为独立的可操作单元，比如带增减按钮的数字输入框，这样每个操作都明确对应字段，无需猜测。

示例结构：

<div class="custom-date">
  <div class="date-field">
    <input type="number" id="year" min="1900" max="2100" value="2020">
    <button onclick="adjustDate('year', 1)">↑</button>
    <button onclick="adjustDate('year', -1)">↓</button>
  </div>
  <span>-</span>
  <div class="date-field">
    <input type="number" id="month" min="1" max="12" value="2">
    <button onclick="adjustDate('month', 1)">↑</button>
    <button onclick="adjustDate('month', -1)">↓</button>
  </div>
  <span>-</span>
  <div class="date-field">
    <input type="number" id="day" min="1" max="29" value="29">
    <button onclick="adjustDate('day', 1)">↑</button>
    <button onclick="adjustDate('day', -1)">↓</button>
  </div>
</div>

对应的处理函数：

function getDaysInMonth(year, month) {
  // 月份从0开始，所以+1
  return new Date(year, month + 1, 0).getDate();
}

function adjustDate(field, direction) {
  const yearInput = document.getElementById('year');
  const monthInput = document.getElementById('month');
  const dayInput = document.getElementById('day');
  
  let year = parseInt(yearInput.value);
  let month = parseInt(monthInput.value) - 1; // 转为0基索引
  let day = parseInt(dayInput.value);
  
  switch (field) {
    case 'year':
      year += direction;
      // 修正日期到新年份当月的有效天数
      const maxDay = getDaysInMonth(year, month);
      day = Math.min(day, maxDay);
      break;
    case 'month':
      month += direction;
      if (month < 0) { month = 11; year--; }
      if (month > 11) { month = 0; year++; }
      const maxDayMonth = getDaysInMonth(year, month);
      day = Math.min(day, maxDayMonth);
      break;
    case 'day':
      const maxDayDay = getDaysInMonth(year, month);
      day += direction;
      if (day < 1) { day = maxDayDay; month--; }
      if (day > maxDayDay) { day = 1; month++; }
      // 处理月份跨年后的年份调整
      if (month < 0) { month = 11; year--; }
      if (month > 11) { month = 0; year++; }
      break;
  }
  
  // 更新输入框值
  yearInput.value = year;
  monthInput.value = month + 1; // 转回1基显示
  dayInput.value = day;
}

补充说明 #

原生input[type="date"]本身没有提供直接获取修改字段的API，因为它的内部实现是黑盒。上述两种方法中，方法1依赖日期格式的光标位置判断（多数现代浏览器都支持YYYY-MM-DD格式），方法2则完全规避了原生组件的限制，灵活性更高。

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