jquery - Datepicker 清除模态数据值

问题描述

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

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

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
    });

})

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

标签： jquerydatepickerbootstrap-modal

与@suraj 在评论中的建议类似，我只是在函数的开头打了个勾，这解决了在选择日期输入时擦除其他字段的问题。如果 datepicker 进入或退出 main 函数，结果并不重要。

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

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

The above snippet prevents the variables from being rewritten as null when datepicker is selected, but the show function still runs again when datepicker is selected, only now it doesn't change any input data.

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

jquery - Datepicker 清除模态数据值

问题描述

解决方案

推荐阅读