@Html.EditorFor see to cache old data and unable to show datepicker

Question

I have this "little" problem. I have created a project MVC, where I need to register a user, with different field. (I will show you only a part.) One particular field, is giving me an issue: On the field DateOfBirth, where I have implemented a datepicker on jquery

When I click on my EditorFor label:

I got at first all the old data I taped before, and my calendar is behind, so i can't select the date:

Is there a way to make disappear the cache and have only the calendar?

@model WebApplication2.Models.Person

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Person</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "datepicker form-control" } })
                @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "ListPerson")
</div>

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

@section Scripts {
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(function() {
            $(".datepicker").datepicker(
                {
                    dateFormat: "yy/mm/dd",
                    changeMonth: true,
                    changeYear : true
                });
        });
    </script>
}

At first I thought it was just the cache of a browser, and I tested with many (IE11, Mozilla, Chrome), and I cleaned cache, but it seem that is storing the date on the application cache. Do you know what it could be the reason?

Kind regards.

Answer 1

Try adding the autocomplete="off" attribute – Stephen Muecke

@Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control", autocomplete = "off" } })

And it works :)