Question

我有一个奇怪的问题，当我点击表单的提交按钮时，bootstrap datepicker打开了。我正在使用MVC 4。下面是我的javascript

$(document).ready(function () {
           $('#startDate').datepicker({
               format: 'dd/mm/yyyy',
               autoclose: true,
               todayBtn: true
           });

           $('#endDate').datepicker({
               format: 'dd/mm/yyyy',
               autoclose: true,
               todayBtn: true
           });

           $('.chosen').chosen();

           $('#btnSubmit').click(function () {
               $('#form1').submit();
           });
       });

HTML是

<div class="form-group">
            <label class="col-md-4 control-label">Start Date</label>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.From, new
           {
               @class = "form-control",
               @id = "startDate",
               @Value = Model.From.ToString("dd/MM/yyyy")
           })
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">End Date</label>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.To, new
           {
               @class = "form-control",
               @id = "endDate",
               @Value = Model.To.ToString("dd/MM/yyyy")
           })
            </div>
        </div>

    <div class="form-group">
        <div class="col-md-4"></div>
        <div class="col-md-8">
            @Html.AntiForgeryToken()

            @Html.ActionLink("Cancel", "Index", "TradeActivityGroups", null, new { @class = "btn btn-danger" })
            <button type="button" class="btn btn-success" id="btnSubmit">Submit</button>
        </div>

任何人都可以告诉我我做错了什么。

更新

此问题仅发生在Chrome浏览器上，而不是任何其他浏览器。

Answer 1

删除datepicker的format属性，它可能与验证冲突

Answer 2

尝试在JS中重写您的#btnSubmit事件处理程序：

$('#btnSubmit').click(function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $('#form1').submit();
});

stopImmediatePropagation()方法可以防止任何事件在DOM中出现，可能会导致您的问题。 preventDefault()阻止该元素的默认处理程序触发。

Bootstrap datepicker在表单提交时打开

2 个答案: