谷歌Chrome更新后Form-control失效，日期字段无法提交求助

看起来你碰到的是Chrome最新版本的一个兼容性小bug——我之前也有同行遇到过类似情况，其他浏览器都正常，唯独新版Chrome里带form-control类的日期输入框提交时会丢失值。下面给你几个可行的解决办法，都能保留日期选择器的同时让提交正常工作：

办法1：添加隐藏同步输入框（最简单直接） #

保留带form-control的日期选择框给用户操作，同时加一个同名的隐藏输入框，用JS同步值。这样提交时后端会拿到隐藏框的内容，完美避开Chrome的bug：

<!-- 用户可见的日期选择器（保留form-control） -->
<input type="date" class="form-control" id="user-date" onchange="document.getElementById('submit-date').value = this.value;">
<!-- 用于提交的隐藏输入框，name和后端接收的字段名一致 -->
<input type="hidden" name="your-date-field" id="submit-date">

如果有多个日期字段，只需要给每个字段都做对应的同步处理就行，逻辑简单，对现有代码改动也小。

办法2：手动处理表单提交过程 #

如果不想加额外的DOM元素，可以在表单提交时手动收集日期值，用FormData来确保值被正确携带：

// 监听表单提交事件
document.querySelector('#your-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  const dateInput = document.querySelector('.form-control[type="date"]');
  const formData = new FormData(this);
  
  // 强制将日期值加入FormData，覆盖可能的空值
  formData.set('your-date-field', dateInput.value);
  
  // 用fetch提交表单（也可以用XMLHttpRequest）
  fetch(this.action, {
    method: this.method,
    body: formData
  })
  .then(response => {
    // 这里处理提交后的响应，比如跳转或提示成功
    if (response.ok) {
      window.location.href = '/success-page';
    }
  })
  .catch(err => console.error('提交失败:', err));
});

这个方法适合本身就用AJAX提交的项目，完全可控，也能避免浏览器自带的提交机制出现的问题。

办法3：检查并修复readonly属性异常 #

有时候新版Chrome会意外给带form-control的日期框加上readonly属性（尤其是用Bootstrap的情况），导致值无法被提交。你可以先打开Chrome开发者工具，选中日期输入框，看看属性面板里有没有readonly：

• 如果有，手动移除它就能解决问题，也可以用JS在页面加载时自动移除：

document.addEventListener('DOMContentLoaded', function() {
  const dateInputs = document.querySelectorAll('.form-control[type="date"]');
  dateInputs.forEach(input => {
    input.removeAttribute('readonly');
    // 或者设置input.readOnly = false; 效果一样
  });
});

临时应急方案（不推荐长期用） #

如果上面的办法都没时间试，可以临时给日期框加个自定义样式，替代form-control的样式，比如：

.custom-date-input {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

然后把class="form-control"换成class="custom-date-input"，这样既保留了类似的样式，又能正常提交，等Chrome修复这个bug后再换回去就行。

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