Both Date & Time EditorFor editor in mvc razor? - asp.net-mvc

Question

When using #Html.EditorFor thing for date or time in mvc razor one can define a model like
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
[DataType(DataType.Time)]
or
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
however, when I change the syntax to DataType.DateTime, in my view I don't get datepicker or time mask with spinner, it just gives me a blank textbox. In my view I need something like dd/mm/yyyy hh:mm posting to the database. Is there a way to do it in mvc razor without using bootstrap datetimepicker/jquery-ui? I am using MVC5.

Answer 1

Answer for 2022.
Try using the default elements from HTML5. Add #type = "date" and #type = "date" to the htmlAttributes
<div class="row">
<div class="col-12 col-md-6">
#Html.LabelFor(Model => Model.TheDate)
#Html.EditorFor(Model => Model.TheDate, new { htmlAttributes = new { Name = "TheDate", #class = "form-control", #type = "date" } })
#Html.HiddenFor(Model => Model.TheDate)
</div>
<div class="col-12 col-md-6">
#Html.LabelFor(Model => Model.TheTime)
#Html.EditorFor(Model => Model.TheTime, new { htmlAttributes = new { Name = "TheTime", #class = "form-control", #type = "time" } })
#Html.ValidationMessageFor(Model => Model.TheTime, "", new { #class = "text-danger" })
</div>
</div>
What you´re doing here is adding the correct types (type="date", and type="time") to the HTML elements. This is the rendered result:
<div class="row">
<div class="col-12 col-md-6">
<label for="TheDate">Date</label>
<input Name="TheDate" class="form-control text-box single-line" data-val="true" data-val-required="Enter the correct date." id="TheDate" name="TheDate" type="date" value="2022-08-18" />
<span class="field-validation-valid text-danger" data-valmsg-for="TheDate" data-valmsg-replace="true"></span>
</div>
<div class="col-12 col-md-6">
<label for="TheTime">Time</label>
<input Name="TheTime" class="form-control text-box single-line" data-val="true" data-val-required="Enter the correct time." id="TheTime" name="TheTime" type="time" value="10:00" />
<span class="field-validation-valid text-danger" data-valmsg-for="TheTime" data-valmsg-replace="true"></span>
</div>
</div>
What you get in the interface (using Google Chrome v104):
and