Wyświetlanie DateTime kompletacji zamiast Date Picker w ASP .NET MVC 5.1/HTML 5 specyficzny

Question

Piszę aplikację w ASP.NET MVC 5.1

Mam murawę:

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

a następnie w widoku

<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> 

co przekłada się na:

czy po prostu zmienić annotiations powyższe własności modelu:

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

nie dostanę żadnej kompletacji wyświetlany. Jeśli zmienię je na:

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

istnieje tylko hh: mm do wyboru.

Pytanie: Wyświetlanie selektora DateTime zamiast wyboru daty w ASP .NET MVC 5.1. Pytam o konkretne rozwiązanie ASP .NET 5.1 HTML 5.

Answer 1

Otrzymujesz ten selektor dat z powodu html5 i przeglądarki obsługującej html5. Możliwe opcje:

• BootStrap datetime picker
• jQuery Datetime Picker

Answer 2

Twoje wymagania są dość wybredna ...

Określanie atrybutu Datatype na polu, będzie generował input mający jako type określony atrybut. Dlatego przy dodawaniu [DataType(DataType.Date)] generowane wejście będzie selektorem daty, ale jeśli dodasz [DataType(DataType.DateTime)], wejście będzie miało typ datetime, dlatego nie pojawi się żaden selektor. Czemu? Ponieważ kilka lat temu przeglądarki obsługujące wejście datetime zdecydowały się przestać je wspierać, a W3C usunęło tę funkcję z powodu braku implementacji.

Jednak nie tak dawno temu niektórzy dostawcy przeglądarek zaczęli ponownie obsługiwać datetime-local, który jest z powrotem w wersji roboczej. W tej chwili obsługują go najnowsze wersje Chrome, Opera i Microsoft Edge.

Jednym z rozwiązań byłoby użycie BootStrap lub jQuery Datetime Picker, jak zasugerował Ajay Kumar.

Inną z nich, jeśli nie masz nic przeciwko kilku przeglądarkom obsługującym, będzie użycie datetime-local. Na przykład:

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

Answer 3

Moje rozwiązanie było nieco inne. Mimo że używa do tego javascript/jQuery.Poszedłem z tym, jeśli używasz adnotacji dane dotyczą

[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; } 

Teraz trzeba mieć skrypty jQueryUI i CSS zawarte na stronie (lub w wiązce). W 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 

Od DataType(DataType.DateTime) sprawia, że ​​wejście z określenia typu datetime. Po prostu użyj tego faktu i weź wszystkie te elementy i ustaw je jako moduły do ​​wybierania daty za pomocą jQuery. Mam ten kod, który jest zawarty w moim pakiecie stron _Layout.

Teraz wszystko, co muszę zrobić, to dodać adnotację do właściwości modelu i pojawi się jako selektor daty jQuery. Możesz chcieć zmienić ustawienia domyślne selektora daty. Mam nadzieję, że to pomaga komuś.