如何用Javascript判断date类型输入框是否被用户实际输入值

核心原理澄清 #

你此前的推测存在偏差：浏览器渲染的dd/mm/yyyy格式占位符仅为UI层展示，不会写入input的真实value属性。原生无默认值的<input type="date">在用户未选择有效日期时，value属性固定为空字符串，只有用户选择合法日期后，才会返回固定格式为YYYY-MM-DD的字符串。

可用实现方案 #

function validateDateInput() {
  // 直接获取原生输入框的真实值
  const dateInput = document.querySelector('input[type="date"]');
  const rawValue = dateInput.value.trim();
  // 双重校验：非空 + 格式匹配，避免异常篡改值的干扰
  const isValid = /^\d{4}-\d{2}-\d{2}$/.test(rawValue);
  return isValid ? 1 : 0;
}

原有判断失效的常见原因 #

你此前使用if(!date)、if(date.length == 0)判断不生效，通常是以下两类问题导致：

1. 取值来源不是原生input的value属性：使用Vue、React等框架时，双向绑定的变量可能被设置了null、""之外的默认空值（比如占位字符串、空对象等）
2. 输入框被设置了默认值：组件库封装的日期组件、或者手动给input加了value属性，覆盖了原生空值状态

调试方法 #

直接打印你拿到的日期值的真实内容即可定位问题：
console.log('日期值类型：', typeof date, '实际内容：', JSON.stringify(date))
根据打印出来的实际值调整判断逻辑即可。

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