Bootstrap模态+ Datepicker +表​​单值

Question

我在bootstrap模式中有一个表单，它有一个使用bootstrap datepicker的输入。我使用这个模态作为＆＃34;更新＆＃34;表单以更新已保存的数据库记录。值正确传递给表单。但是，如果我单击日期选择器输入，则会出现日期下拉列表，并且表单将丢失其所有值。

请参阅：http://jsfiddle.net/fn8hmve8/

＆＃13;

＆＃13;

$('#form-update-task').on('show.bs.modal', function(f) {
        var name = $(f.relatedTarget).data('form_name');
        var priority = $(f.relatedTarget).data('form_priority');
        var rr = $(f.relatedTarget).data('form_rr');
        var due_date = $(f.relatedTarget).data('form_due_date');
        var assigned = $(f.relatedTarget).data('form_assigned');
        var id = $(f.relatedTarget).data('form_id');
        $(this).find('.modal-header').html("Update " + name);
        $(".modal-body #name").val( name );
        $(".modal-body #priority").val( priority );
        $(".modal-body #rr").val( rr );
        $(".modal-body #due_date").val( due_date );
        $(".modal-body #assigned").val( assigned );
        $(".modal-body #id").val( id );
});
$('.datepicker').datepicker({
        format: "yyyy-mm-dd",
        startDate: "Today"
}); 

＆＃13;

<a href="#" data-keyboard="false" data-backdrop="static" data-toggle="modal" data-target="#form-update-task" data-form_id="1" data-form_name="form name" data-form_priority="priority" data-form_rr="123456" data-form_due_date="2015-08-13" data-form_assigned="some guy">Edit</a>
<!-- Form Modal -->
<div class="modal fade" id="form-update-task" tabindex="-1" role="dialog" aria-labelledby="form-submission" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <form action="dashboard.php?action=update&type=tasks" type="POST" role="form">
                <div class="form-group">
                        <label for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name">
                </div>
                <div class="form-group">
                        <label for="priority">Priority</label>
                        <input class="form-control" type="text" name="priority" id="priority">
                </div>
                <div class="form-group">
                        <label for="rr">Resource Request ID</label>
                        <input class="form-control" type="text" name="rr" id="rr">
                </div>
                <div class="form-group">
                        <label for="due_date">Due Date</label>
                        <input class="datepicker form-control" type="text" name="due_date" id="due_date">
                </div>
                <div class="form-group">
                        <label for="assigned">Assigned</label>
                        <input class="form-control" type="text" name="assigned" id="assigned">
                </div>
                <input type="hidden" name="id" id="id">
                <button class="btn btn-default" type="submit">Update</button>
        </form>

            </div>
            <div class="modal-footer">
            </div>      
        </div>  
    </div>      
</div>                  
<!-- Form Modal -->  

＆＃13;

＆＃13;

＆＃13;

我已经在网络上发现的一些代码拼凑起来了。关于如何解决这个问题的任何建议都表示赞赏。

Answer 1

您使用的日期选择器也有show事件，模态触发器show.bs.modal再次运行。

对此的解决方法是进行简单检查，如果未定义f.relatedTarget，则触发器来自datepicker。

$('#form-update-task').on('show.bs.modal', function(f) {
    if (f.relatedTarget === undefined) return; 
    // Do other stuff here
});

查看演示here