Mvc 5 При редактировании значения даты, Box не позволяет мне выбрать новую дату, если я заполню ее

Question

У меня есть поле даты, и я хочу, чтобы оно было заполнено текущим значением, и позвольте мне выбрать дату одновременно, но этого не происходит. Когда я делаю model.CourseDate. Дата для EditorFor строки, как это:

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

это происходит

Если я сделаю labelfor вот так

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

Это происходит:

Я хочу заполнить поле и одновременно выбрать дату из выпадающего списка.

Answer 1

Здесь есть два разных представления:

1) В первом EditorFor оно ограничивается свойством Date как частью DateTime экземпляра в CourseDate, следовательно, оно отображается в виде простого текстового поля с <input type="datetime" />. Таким образом,

@Html.EditorFor(model => model.CourseDate.Date, new { htmlAttributes = new { @class = "form-control" } })

отображается так:

<input id="CourseDate_Date" name="CourseDate.Date" type="datetime" value="...">

2) Второе EditorFor ограничение для CourseDate свойства viewmodel, которое определено как DateTime, следовательно, <input type="date" /> отображается. Таким образом,

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

отображается так:

<input id="CourseDate" name="CourseDate" type="date" value="...">

Так как ваша цель - позволить пользователю редактировать дату внутри ввода непосредственно вместе с выбором палитры, обходной путь использует помощник TextBoxFor с атрибутом type="date" в htmlAttributes. Следовательно, ваши данные должны быть отформатированы, как показано ниже:

@Html.TextBoxFor(model => model.CourseDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })

Обратите внимание, что элемент <input type="date" /> требует значения, отформатированного в формате yyyy-MM-dd, для отображения его значения в соответствии с HTML-спецификацией даты , следовательно, форматирование строки {0:yyyy-MM-dd} используется для соответствия этому формату.

Эта скрипка содержит пример, где пользователь должен иметь возможность вводить компоненты даты вручную вместе с использованием средства выбора даты из элемента <input type="date" />.

Справка:

Ввод даты в формате HTML (MDN)