datepicker第二次提交表单时仍传递首次选中日期的问题咨询

• datepicker组件未同步更新输入框的value属性
  绝大多数datepicker插件默认仅修改输入框的显示文本，不会主动同步更新DOM节点的value属性。首次选中日期后value被赋值，后续重新选日期如果插件没有触发value更新，表单提交时会一直携带第一次的value值。
• 浏览器表单缓存/自动回填机制
  你的appdate输入框设置了readonly只读属性，部分浏览器会缓存只读输入框的历史提交值，页面刷新后自动回填上次提交的内容，导致你视觉上选了新日期，实际输入框存储的还是旧值。
• datepicker选中交互逻辑问题
  部分datepicker插件需要点击弹窗内的「确认」按钮才会把选中值同步到输入框，直接点击空白区域关闭弹窗只会临时显示选中的日期，不会实际修改输入框值。
• datepicker配置项问题
  如果你的datepicker开启了默认值缓存、自动读取历史选中记录的配置，会在页面加载时自动把上次存在本地存储/会话中的日期填回输入框，覆盖你新选择的值。

1. 验证并修复datepicker值同步问题
   打开浏览器控制台，每次选完日期后执行console.log(document.getElementById('appdate').value)，如果输出值和页面显示的选中日期不一致，说明是插件没有同步value，需要添加选中事件回调手动赋值，以常用的jQuery Datepicker为例：

$('.datepicker').datepicker({
  // 保留你原有配置的基础上添加以下回调
  onSelect: function(selectedDate) {
    $('#appdate').val(selectedDate);
  }
});

其他框架的datepicker可查找对应change/selected事件回调，手动将选中日期赋值给输入框的value属性即可。

2. 禁用浏览器表单自动填充
   给form标签和appdate输入框都添加autocomplete="off"属性，修改后代码如下：

<form method="post" enctype="multipart/form-data" id="form" name="form" autocomplete="off">
<!-- 其他代码不变 -->
<input name="appdate" readonly="readonly" id= "appdate" type="text" class="form-control datepicker" data-format="dd-mm-yyyy" data-lang="en" data-RTL="false" autocomplete="off">

3. 页面加载时清空输入框默认值
   在页面加载完成的JS逻辑中添加清空输入框的代码，避免datepicker自动回填历史值：

// 原生JS写法
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('appdate').value = '';
});

// jQuery写法
$(function() {
  $('#appdate').val('');
});

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