如何使用HTML <input type='date'>提交空日期值

针对Chrome、Firefox、Opera等浏览器中，input type="date"字段留白时自动提交当前日期的问题，以下是几个可行的解决方法：

方法一：表单提交前用JavaScript清空未选择的日期字段 #

通过监听表单提交事件，检查日期输入框的值，如果等于当前日期（即浏览器自动填充的情况），就强制清空该值，确保提交空字符串。

示例代码：

<form id="dateForm">
  <input type="date" name="targetDate" id="targetDate" value="">
  <button type="submit">提交表单</button>
</form>

<script>
document.getElementById('dateForm').addEventListener('submit', function(e) {
  const dateInput = document.getElementById('targetDate');
  // 获取当前日期的ISO格式（YYYY-MM-DD）
  const today = new Date().toISOString().split('T')[0];
  // 若输入值为当前日期，强制清空
  if (dateInput.value === today) {
    dateInput.value = '';
  }
});
</script>

方法二：未选择日期时禁用字段 #

如果日期字段允许为空，在表单提交前判断，若用户未选择有效日期，就禁用该字段。被禁用的表单字段不会被提交到服务器，以此实现“提交空值”的效果。

示例代码：

<form id="dateForm">
  <input type="date" name="targetDate" id="targetDate" value="">
  <button type="submit">提交表单</button>
</form>

<script>
document.getElementById('dateForm').addEventListener('submit', function(e) {
  const dateInput = document.getElementById('targetDate');
  const today = new Date().toISOString().split('T')[0];
  // 无值或为当前日期时禁用字段
  if (!dateInput.value || dateInput.value === today) {
    dateInput.disabled = true;
  }
});
</script>

方法三：服务器端二次校验 #

前端处理可能存在兼容性遗漏，建议在服务器端做兜底校验：如果收到的日期值等于当前日期，且该字段允许为空，就将其视为空值处理。

以PHP为例的示例代码：

$submittedDate = $_POST['targetDate'] ?? null;
$today = date('Y-m-d');
// 若提交的是当前日期且字段允许为空，转为空值
if ($submittedDate === $today) {
  $submittedDate = null;
}

设置value=''无效的原因是部分浏览器存在兼容性问题，会在表单提交阶段自动填充当前日期到看似空白的date输入框中，仅通过HTML属性无法阻止这一行为，必须结合JS或后端校验来解决。

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