模态框内表单datepicker选值自动填充到外部表单输入框问题求解

核心原因是同一DOM页面存在重复ID属性：HTML规范明确要求同一页面内所有元素的id必须唯一，你提供的两套表单中，对应字段的id完全一致，而日期选择器组件默认会通过id定位要回填值的输入框，当id重复时，会默认匹配DOM结构中第一个出现的对应id元素（即外层普通页面的表单输入框），因此会出现模态框内选择日期、外层表单回填的异常。

下面提供三种可直接落地的解决方式，可根据你的业务场景选择： #

方案1：修改为唯一ID（最推荐，符合规范） #

给模态框内的所有输入框id增加专属标识后缀，保证全页面id唯一，不需要修改datepicker初始化逻辑即可解决冲突：
修改后的模态框内表单代码示例：

<div class="modal">
    <form class="col s12 api-save-form" enctype="multipart/form-data">
        <input type="text" name="connection_date" class="datepicker dateinput form-control hasDatepicker" id="id_connection_date_modal"> 
        <input type="text" name="disconnection_date" class="datepicker dateinput form-control hasDatepicker" id="id_disconnection_date_modal"> 
        <input type="text" name="re_connection_date" class="datepicker dateinput form-control hasDatepicker" id="id_re_connection_date_modal"> 
    </form>
</div>

方案2：按作用域绑定datepicker（无需修改ID） #

如果不方便调整现有ID，在初始化datepicker时区分两个表单的父级作用域，同时手动指定回填对象为当前触发选择器的输入框即可，以jQuery UI Datepicker为例：

// 初始化外层表单的日期选择器
$('.api-save-form:not(.modal .api-save-form) .datepicker').datepicker({
  onSelect: function(dateText) {
    $(this).val(dateText);
  }
});

// 初始化模态框内表单的日期选择器
$('.modal .api-save-form .datepicker').datepicker({
  onSelect: function(dateText) {
    $(this).val(dateText);
  }
});

方案3：全局绑定自动适配（无侵入修改） #

如果是全局统一初始化所有datepicker，直接在回调中指定回填对象为当前触发元素，不需要区分作用域也不需要修改ID：

$('.datepicker').datepicker({
  onSelect: function(dateText) {
    this.value = dateText;
  }
})

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