I'm wondering how to insert a <input type="date"/> for datetime attributes of my model.
As for now Razor creates a plain input element with type="datetime". I want to make use of the new input types of HTML5.
Add a comment
|
5 Answers
The input date value format needs the date specified as per https://www.rfc-editor.org/rfc/rfc3339#section-5.6 full-date.
So I've ended up doing:
<input type="date" id="last-start-date" value="@string.Format("{0:yyyy-MM-dd}", Model.LastStartDate)" />
I did try doing it "properly" using:
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime LastStartDate
{
get { return lastStartDate; }
set { lastStartDate = value; }
}
with
@Html.TextBoxFor(model => model.LastStartDate,
new { type = "date" })
Unfortunately that always seemed to set the value attribute of the input to a standard date time so I've ended up applying the formatting directly as above.
Edit:
According to Jorn if you use
@Html.EditorFor(model => model.LastStartDate)
instead of TextBoxFor it all works fine.
7 Comments
Jørn Schou-Rode
+1 Actually, it seems that with these data annotations on the property,
Html.EditorForm(m => m.LastStartDate) renders an <input type=date>. Thus, no need to override the type attribute.
Giles Roberts
@JørnSchou-Rode Thanks. Shouldn't that be Html.EditorFor?
Giles Roberts
@JørnSchou-Rode I've updated my answer in response to your comment.
Jørn Schou-Rode
Indeed it should. The
m is a typo :)
tofutim
Where does EditorFor come from?
|
I managed to do it by using the following code.
@Html.TextBoxFor(model => model.EndTime, new { type = "time" })
3 Comments
redzsol
Just a late comment why this answer shows only time in Chrome?
FigletNewton
Input type date isn't supported in Safari or IE. Were you using either of those? Source: caniuse.com/#search=date
moarra
Html.EditorFor should be used instead textboxfor
@Html.TextBoxFor(m => m.EntryDate, new{ type = "date" })
or type = "time"
it will display a calendar
it will not work if you give @Html.EditorFor()
Comments
If you want to use @Html.EditorFor() you have to use jQuery ui and update your Asp.net Mvc to 5.2.6.0 with NuGet Package Manager.
@Html.EditorFor(m => m.EntryDate, new { htmlAttributes = new { @class = "datepicker" } })
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function(){
$('.datepicker').datepicker();
});
</script>
}
Comments
You will get it by tag type="date"...then it will render beautiful calendar and all...
@Html.TextBoxFor(model => model.EndTime, new { type = "date" })
