Save input field text displays over bootstrap datepicker

Question

I have a ASP.net MVC4 project where the bootstrap date pickers recently stopped working as intended in Chrome, they work fine in IE.

This image shows the issue I'm having.

My bundleconfig looks as follows:

            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"
                  ));

The javascript file that tells the input field to be a datepicker via a class reference looks as follows:

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'
    });

})

And the razor syntax in the view is as follows:

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

This is my layout file:

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

This just happened this week, perhaps chrome rolled out a new update? You can see the datepicker is showing up but the saved input takes precedence for whatever reason. I tried updating my jquery & jquery ui. Only thing I didn't try yet was to update bootstrap. Not sure if I want to try that and break other things.

Any help is greatly appreciated.

score 1 · Accepted Answer · answered Jun 08 '18 at 18:44

1

I advice you to use autocomplete=off

<input autocomplete=off />

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

answered Jun 08 '18 at 18:44

A-312

10,203
4
38
66

Wow, I spent 2 hours on this. I searched everywhere but didn't use autocomplete in my searches. Duh, thanks so much. – Waragi Jun 08 '18 at 18:45
Also you can submit your form with ajax. – A-312 Jun 08 '18 at 18:47
Yeah I know, this is an old app I inherited. – Waragi Jun 08 '18 at 18:48
Does it work ? don't forget to accept the answer ;) You can do : `$( "#datepicker" ).datepicker().attr("autocomplete", "off")` – A-312 Jun 08 '18 at 18:54
That's a clever idea, better then writing it out on each input field. Good thinking. – Waragi Jun 08 '18 at 19:01

Save input field text displays over bootstrap datepicker

1 Answers1