JavaScript：如何获取未完成/ESC取消的date字段值？

嘿，这个问题我之前做表单的时候也碰到过，原生date输入框的这个行为确实有点坑人。别着急，我给你分享几个实用的解决思路：

1. 用input事件实时缓存输入内容 #

原生date输入框的value只有在用户输入了完整有效日期时才会更新，半完成的输入或者无效内容不会同步到value里。但input事件会在用户每一次输入（哪怕只是敲了一个数字）时触发，我们可以利用这个事件把用户输入的内容实时存到一个临时变量里，这样不管用户中途切换单元格还是按ESC，都能拿到最新的输入内容。

示例代码：

// 定义变量缓存临时输入值
let tempDateInput = '';
const dateField = document.getElementById('your-date-id');

// 实时监听输入，更新缓存
dateField.addEventListener('input', (e) => {
  // 兼容单元格文本节点的场景
  tempDateInput = e.target.value || e.target.textContent;
});

// 在blur事件里优先使用缓存值，再回退到value
dateField.addEventListener('blur', () => {
  const actualInput = dateField.value || tempDateInput;
  // 这里写你的验证逻辑
  if (!isValidDate(actualInput)) {
    dateField.parentElement.style.backgroundColor = 'red';
  } else {
    dateField.parentElement.style.backgroundColor = '';
  }
});

// 辅助函数：简单的日期格式验证
function isValidDate(str) {
  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
  return dateRegex.test(str) && !isNaN(new Date(str));
}

2. 监听ESC按键，及时保存临时内容 #

如果用户按ESC取消输入，我们可以在keydown事件里捕获这个动作，直接使用之前缓存的临时值来做后续处理，避免丢失输入内容：

dateField.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    console.log('用户取消输入，当前输入内容：', tempDateInput);
    // 直接调用验证逻辑处理
    if (!isValidDate(tempDateInput)) {
      dateField.parentElement.style.backgroundColor = 'red';
    }
  }
});

3. 替换原生date为普通text输入（更灵活的方案） #

如果原生date的限制太多，不如直接用type="text"的输入框，自己控制日期格式的引导和验证。这种方式下，不管用户输入到哪一步，value都能直接拿到真实的输入字符串，完全避开原生date的行为限制：

<!-- 替换原生date为text输入，加格式提示 -->
<td><input type="text" id="custom-date" placeholder="请输入YYYY-MM-DD"></td>

然后在JS里监听输入、做格式检查，比如限制用户只能输入数字和横杠，同时实时验证格式是否正确，这样整个流程的控制权完全在你手里。

补充说明 #

为什么原生date会出现这种情况？因为浏览器对原生date输入有严格的有效性校验，只有当输入内容符合YYYY-MM-DD格式且是真实存在的日期时，才会把值同步到value属性里。半完成的输入（比如只输了2024-）或者无效日期会被浏览器忽略，所以用getElementById().value读不到内容。

内容的提问来源于stack exchange，提问作者willy.z