Datepicker 清除模态数据值答案

【问题标题】：Datepicker Clears Modal Data ValueDatepicker 清除模态数据值
【发布时间】：2019-07-04 13:52:40
【问题描述】：

我有一个带有触发模式的按钮的 foreach 循环。该模式有一个包含日期选择器输入字段的表单。为方便起见，其他一些表单字段预填充了初始触发按钮中的变量。但是，当我选择日期选择器时，所有其他输入字段都会被擦除。我认为这是因为我的 datepicker 事件正在覆盖我的数据字段，但无法弄清楚如何让它们和谐一致。

我已经尝试重新排序日期选择器和模式事件，并使用各种日期选择器版本遵循其他示例，但没有成功。我可以在其中放置不会导致问题的其他无日期选择器字段。

Version: bootstrap-datepicker/1.7.1/

带有一些变量的触发按钮：

<button data-toggle='modal' data-one='{$row['thingone']}' data-two='{$row['thingtwo']}' data-target='#myModal'>The Button</button>

我的模态表单：

<form method='post' action=''>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>One Thing</th>
                <th>Two Things</th>
                <th>The Date</th>
            </tr>
        </thead>
        <tbody id='myModalbody'>                               
            <tr>
                <td><input class='form-control' type='text' name='one' id='one' ></td>
                <td><input class='form-control' type='text' name='two' id='two' ></td>
                <td><input class='form-control' id='the_date' type='text' data-date-format="yyyy/mm/dd" name='the_date' ></td>
            </tr>                               
        </tbody>
    </table>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary"> Update </button>
    </div>
</form>

以及本次迭代页面末尾的脚本：

$('#myModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget)
    var one    = button.data('one') //info from data-*
    var two    = button.data('two')
    var modal  = $(this)
    modal.find('.modal-body #one').val(one)
    modal.find('.modal-body #two').val(two)

    $('input[name="the_date"]').datepicker({                
        format: "yyyy/mm/dd",           
        autoclose: true,
        todayHighlight: true
    });

})

数据一和二会正确填充到各自的字段中，但如果其他字段已从触发器按钮中填充，则单击日期选择器输入字段会删除它们。任何帮助将不胜感激！

【问题讨论】：

当触发 datepickers 'onDateChange' 事件时，我们可能会有点棘手并再次设置其他字段的值。 documentation
在我找到更干净的东西之前可能是一个很好的解决方法，谢谢！
您的选择器 $('input[name="the_date"]') 可能有歧义，我相信正确的使用方法是不使用双引号 $('input[name=the_date]')
删除双引号得到相同的结果，我也尝试使用：#the_date 但我遇到的大多数示例都使用双引号方法..
似乎当日期选择器获得焦点时，模式显示功能被触发。您可以将 datepicker 初始化从函数中移出，并在函数顶部添加一个检查 if(!event.relatedTarget) return;。

标签： jquery datepicker bootstrap-modal

【解决方案1】：

类似于@suraj 在 cmets 中的建议，我只是在函数的开头放置了一个检查，这解决了在选择日期输入时擦除其他字段的问题。日期选择器在主函数内还是在主函数外都与结果无关。

 if ( event.relatedTarget != null) {
     var button     = $(event.relatedTarget) // Button that triggered the modal
 }

在我的show函数中使用：alert (event.relatedTarget)我意识到整个函数被日期字段重新触发，只有在使用.datepicker时，这将导致event.relatedTarget为空，因为显然数据信息因为其他字段没有存储在 datepicker 中，并且因为它重新触发了函数，它会使用新的空数据更新查找字段。

上述SN-P在选择DatePicker时防止变量被重写为NULL，但在选择DatePicker时，Show函数仍然运行，只有现在它不会改变任何输入数据。

我仍然不完全明白为什么日期选择器会再次触发显示模式，但这是我找到的最简单的解决方法，直到我能更好地理解发生了什么......

【讨论】：