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

问题:

This question already has an answer here:

• Date only from TextBoxFor() 17 answers

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.

回答1:

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" })

回答2:

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" }) %>

回答3:

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>

回答4:

Convert c# Datetime to HTML-5 Date value

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