How to stop Html.EditorFor from displaying previous values in a dropdown

Question

How do I stop an Html.EditorFor element from displaying previous entered values in a drop down when I click in it. Below the html for this element I am using:

@Html.EditorFor(model => model.CreateDate,
 new
 {
     htmlAttributes = new
     {
         @class = "form-control datepicker",
         @id = "id-CreateDatePicker"
     }
 })

The automatic dropdown of previous values keeps covering the popup calendar which is preventing a user from selecting a date. The below picture shows the drop down of previous values that I need to stop showing when a user clicks in the box:

Thanks in advance.

Answer 1

When a user starts typing in an HTML form field, browsers, by default, enable the autocomplete feature. Numerous users let their browsers collect form data allowing using autocomplete in forms in the future.

To disable or enable autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. This attribute contains two values:

1. on (specifies that autocomplete is enabled, this is the default value)
2. off (specifies that autocomplete is disabled)

This can be done in a <form> for a complete form or for specific <input> elements:

1. Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.
2. Add autocomplete="off" for a specific <input> element of the form.

Example :

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