How to use Html.TextBoxFor with input type=date?

Question

I want to implement in my code. To that end, I have the following:

@Html.TextBoxFor(model => model.CreationDate, new { @type = "date" })

This code generates the following HTML:

<input data-val="true" data-val-date="The field CreationDate must be a date." 
             data-val-required="The CreationDate field is required." 
             id="CreationDate" name="CreationDate" type="date" 
             value="09/05/2012 15:02:19">

The value does not show up on the web page because type="date" expects data in YYYY-MM-DD format.

I've tried formatting the date, but that blows up, of course.

@Html.TextBoxFor(model => model.CreationDate.ToString("YYYY-MM-DD"), 
                 new { @type = "date" })

How do I use TextBoxFor method to properly display the construct? Or should I be using some other method (I already tried EditorFor but failed)?

CreationDate is of type DateTime.

Specifically, I tend to use the overload mentioned here: http://stackoverflow.com/a/13702321/534109 — Tieson T., Aug 01 '14 at 19:07

Saranga · Accepted Answer · 2014-08-01T19:46:28.570

72

Try this;

@Html.TextBoxFor(model => model.CreationDate,
           new { @type = "date", @Value = Model.CreationDate.ToString("yyyy-MM-dd") })

You have to handle null when setting the value.

OR

If you can change the Model you can try this;

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime CreationDate{ get; set; }

and in your view you can use EditorFor helper.

@Html.EditorFor(model => model.CreationDate, new { @type = "date" })

edited Aug 01 '14 at 19:46

answered Aug 01 '14 at 19:18

Saranga

3,178
1
18
26

12

Do not use the first option (never set the `value` attribute when using the `HtmlHelper` methods - you lose true 2-way model binding - the correct use is `@Html.TextBoxFor(model => model.CreationDate, "{0:yyyy-MM-dd}", new { type="date" })` and the second option just needs to be `@Html.EditorFor(model => model.CreationDate)` - the `type="date"` is already added by the `EditorFor()` method because of the `[DataType(DataType.Date)]` attribute – Sep 20 '16 at 04:14
In any case, `new { @type = "date" }` does nothing at all (in [MVC5.1](http://www.asp.net/mvc/overview/releases/mvc51-release-notes) or higher, it would need to be `new { htmlAttributes = new { type="text" }}` and in lower versions you cannot add attributes using the `EditorFor()` method. – Sep 20 '16 at 04:15
I was using the recommendation above "{0:yyyy-MM-dd}", and it wasn't working. I went to the version in the answer, where Value is set explicitly, and it worked. Looking at the HTML generated in the first version, and I could see the Value was NOT in the form yyyy-MM-dd. – Simon Parker Jul 26 '18 at 06:53

score 4 · Answer 2 · edited Apr 12 '16 at 07:17

4

Model design:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime CreationDate{ get; set; }

View Design:

<%: Html.EditorFor(m => m.CreationDate, new { @type = "date" }) %>

edited Apr 12 '16 at 07:17

Dr.jacky

3,341
6
53
91

answered Apr 12 '16 at 06:59

Wesley Kai Tian

41
1

score 0 · Answer 3 · answered Aug 01 '14 at 19:26

I've done something similar with EditorFor and the boostrap-datepicker library:

    <div class="input-prepend date" id="startDate" data-date=@DateTime.UtcNow data-date-format="m/d/yyyy">
        <span class="add-on"><i class="icon-calendar"></i></span>
        @Html.EditorFor(m => m.StartDate)            
    </div>

score -1 · Answer 4 · answered Feb 24 '16 at 20:01

-1

Convert c# Datetime to HTML-5 Date value

<input type="date" value="<%= SomeFieldDate.ToString("yyyy-MM-dd")%>"/>

answered Feb 24 '16 at 20:01

Ravi Ram

24,078
21
82
113

How to use Html.TextBoxFor with input type=date?

4 Answers4

Linked

Related