Question

我有一个ASP.net MVC4项目，其中引导日期选择器最近停止在Chrome中按预期工作，它们在IE中正常工作。

此图片显示了我遇到的问题。

我的bundleconfig如下所示：

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.12.4.js",
                    "~/Scripts/jquery-ui-1.12.1.js"
                    )
                    );


        bundles.Add(new ScriptBundle("~/bundles/createTimeRequest").Include(
                    "~/Scripts/createTimeRequest.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                    "~/Scripts/moment.js"));

        bundles.Add(new ScriptBundle("~/bundles/Calendar").Include(
                                "~/Scripts/fullcalendar.js"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/jquery.dataTables.js",
                  "~/Scripts/dataTables.jqueryui.js",
                  "~/Scripts/dataTables.foundation.js",
                  "~/Scripts/dataTables.bootstrap.js",
                  "~/Scripts/dataTables.buttons.min.js",
                  "~/Scripts/bootstrap-datepicker.js",
                  "~/Scripts/buttons.print.min.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                   "~/Content/themes/base/jquery.ui.all.css",
                   "~/Content/themes/base/jquery.ui.base.css",
                   "~/Content/themes/base/jquery.ui.theme.css",
                   "~/Content/dataTables.bootstrap.css",
                   "~/Content/jquery.dataTables.css",
                   "~/Content/dataTables.foundation.css",
                   "~/Content/dataTables.jqueryui.css",
                   "~/Content/bootstrap.css",
                   "~/Content/bootstrap-datepicker.css",
                  // "~/Content/themes/base/datepicker.css",
                   "~/Content/fullcalendar.css",
                   "~/Content/site.css",
                   "~/Content/buttons.dataTables.min.css"
                  ));

通过类引用告诉输入字段为datepicker的javascript文件如下所示：

var year = (new Date).getFullYear();
$(function () {
    $('.datepicker').datepicker({
        orientation: "right",
        startDate: new Date(year, 0, 1),
        //endDate: new Date(year, 11, 31)
    });

    $('.dpManager').datepicker({
        orientation: "right",
        endDate: '+365d'
    });

})

视图中的剃刀语法如下：

  <div class="col-md-4"><label>Select company: </label>@Html.ListBox("Company", (MultiSelectList)ViewBag.Company, new { @class = "form-control", size = 9 })</div>
        <div class="col-md-4">
                @Html.Label("Start Date:")
                @Html.Editor("sDateTime", new { htmlAttributes = new { @class = "dpManager form-control" } })

        </div>
        <div class="col-md-4">
                @Html.Label("End Date:")
                @Html.Editor("eDateTime", new { htmlAttributes = new { @class = "dpManager form-control" } })
            </div>
        </div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/createTimeRequest")
}
<script>
        if (!$("#sDateTime").val() || !$("#sDateTime").val()) {
            $('#btnSubmit').prop("disabled", true);
        }
</script>

这是我的布局文件：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


</head>
<body>
   ........
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

这个刚刚发生在本周，也许chrome推出了一个新的更新？您可以看到日期选择器正在显示，但保存的输入优先于任何原因。我尝试更新我的jquery＆amp; jquery ui。我唯一没有尝试的是更新bootstrap。不确定我是否想尝试并打破其他事情。

非常感谢任何帮助。

Answer 1

我建议您使用autocomplete = off

<input autocomplete=off />

How do you disable browser Autocomplete on web form field / input tag?

保存输入字段文本显示在引导程序datepicker上

1 个答案: