Отображение выбора DateTime вместо выбора даты в ASP.NET MVC 5.1/HTML 5

Я пишу приложение в ASP.NET MVC 5.1

У меня есть поле:

  [DisplayName("Date of Birth")]
  [DataType(DataType.Date)]
  public DateTime BirthDate { get; set; }

а затем в представлении

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

что соответствует:

если я просто изменяю аннотации выше свойства в модели, чтобы:

    [DisplayName("Date of Birth")]
    [DataType(DataType.DateTime)]

У меня нет выбора. Если я изменю их на:

 [DisplayName("Date of Birth")]
 [DataType(DataType.Time)]

есть только hh: mm, чтобы выбрать.

Вопрос: Отображение подборщика DateTime вместо выбора даты в ASP.NET MVC 5.1. Я прошу специфическое решение ASP.NET 5.1 HTML 5.

Ответ 1

Вы получаете этот выбор даты из-за html5 и браузера, поддерживающего html5. Возможные варианты:

Ответ 2

Ваши требования довольно придирчивы...

Указание атрибута Datatype для поля будет генерировать input с type указанным атрибутом. Поэтому, когда вы добавляете [DataType(DataType.Date)], создаваемый ввод будет выбором даты, но если вы добавите [DataType(DataType.DateTime)], вход будет иметь тип datetime, поэтому вы не получите отображаемого выбора. Зачем? Поскольку несколько лет назад браузеры, поддерживающие ввод datetime, решили прекратить поддерживать его, и W3C удалил эту функцию из-за отсутствия реализации.

Однако не так давно некоторые поставщики браузеров снова начали поддерживать datetime-local, который вернулся к черновику. На данный момент поддерживаются последние версии Chrome, Opera и Microsoft Edge.

Одним из решений было бы использовать BootStrap или jQuery Datetime Picker, как предложил Ajay Kumar.

Другим может быть, если вы не против нескольких поддерживающих браузеров, использовать datetime-local. Как это, например:

@Html.TextBoxFor(model => model.BirthDate, new { type = "datetime-local"})

Ответ 3

Мое решение несколько отличалось. Хотя он использует javascript/jQuery для выполнения. Я пошел с фактом, если вы используете аннотацию данных

[Display(Name = "The Display Name")DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yy H:mm:ss tt}"), DataType(DataType.DateTime)]
        public DateTime DateTimeFieldName { get; set; }

Теперь вам нужно иметь скрипты jqueryUI и CSS, включенные на странице (или в комплекте). В Javascript:

$(function () {//DOM ready code
    // Get data-annotations that are Marked DataType.DateTime and make them jquery date time pickers
    $('input[type=datetime]').datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', changeMonth: true, changeYear: true, showAnim: 'slideDown' });
});// END DOM Ready

Так как DataType(DataType.DateTime) делает ввод с типом datetime. Просто используйте этот факт и возьмите всех из них и сделайте им выбор времени, используя jQuery. У меня есть этот код, который включен в мой пакет _Layout.

Итак, теперь все, что мне нужно сделать, это аннотировать свойство в модели, и оно будет отображаться как выбор времени jQuery. Вы можете изменить настройки по умолчанию для выбора времени. Надеюсь, это поможет кому-то.