Bootstrap datepicker not displaying model value in editorFor

Question

Issue: I have a search page that is looking data that occurs in a range. There is a "From" and a "To" datepicker input in the view. I want to default the selection of these values to the corresponding "From" and "To" dates passed in with the view model. The correct value from the view model is loading into the view's input control, but the date picker does not display the value, it only shows an input mask of mm/dd/yyyy. If I take out or change the " type=" value to "text" instead of date, the correct date values display, but then the datepicker does not.

Here is my editor template:

@model DateTime?

@Html.TextBox("", Model, "{0:MM/dd/yyyy}", new { @class = "datepicker form-control", type = "date" })

Here is the class property:

    [DataType(DataType.Date)]
    public DateTime? DateTakenFrom { get; set; }

Here is the view:

@Html.EditorFor(model => model.Criteria.DateTakenFrom)

Here is what renders:

<input class="datepicker form-control" data-val="true" data-val-date="The field DateTakenFrom must be a date." id="Criteria_DateTakenFrom" name="Criteria.DateTakenFrom" type="date" value="03/17/2014">

meskobalazs meskobalazs · Accepted Answer · 2014-03-19T18:39:22

The date is a proposed type in HTML5 (source: Mozilla Developer Network), but it is not implemented well in most browsers, so I discourage its use. Use some Javascript plugin with type="text". Take note, that there are existing plugins for Bootsrap version 2 and 3, and they are not compatible.

Bootstrap datepicker not displaying model value in editorFor

1 Answers