Bootstrap 模式 + 日期选择器 + 表单值

Question

我在 bootstrap 模态中有一个表单，它有一个使用 bootstrap 日期选择器的输入。我将此模式用作 "update" 表单来更新已保存的数据库记录。值正确传递给表单。但是，如果我单击日期选择器输入，则会出现日期下拉菜单，并且表单会丢失所有值。

请看：http://jsfiddle.net/fn8hmve8/

$('#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"
});

<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 -->

我根据在网上找到的一些代码拼凑而成。感谢任何有关如何解决此问题的建议。

Answer 1

您正在使用的日期选择器也有一个 show 事件并且模态触发器 show.bs.modal 再次运行。

解决此问题的方法是进行简单检查，如果 f.relatedTarget 未定义，则触发器来自日期选择器。

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

观看演示 here

Bootstrap 模式 + 日期选择器 + 表单值

Bootstrap Modal + Datepicker + Form Values

forms

jquery

datepicker

twitter-bootstrap

bootstrap-modal