引导模式 + 日期选择器 + 表单值

Posted 2023-05-08

【中文标题】引导模式 + 日期选择器 + 表单值

【英文标题】：Bootstrap Modal + Datepicker + Form Values

【发布时间】：2015-07-31 19:50:24

【问题描述】：

我在引导程序模式中有一个表单，该表单使用引导程序日期选择器进行输入。我将此模式用作“更新”表单来更新已保存的数据库记录。这些值会正确传递给表单。但是，如果我单击 datepicker 输入，则会出现日期下拉菜单，并且表单会丢失其所有值。

请看：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 -->  

我是从网上找到的一些代码拼凑而成的。任何有关如何解决此问题的建议表示赞赏。

【参考方案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