CODEWITHSUNDEEP
asp.net-mvcdaterazorasp.net-mvc-5data-annotations
Analytic Lunatic
Analytic Lunatic

Reputation: 3944

Model DataAnnotation [DataType(DateType.Date)] renders DatePicker but hides my value?

I have 3 date fields in my INV_Assets model: acquired_date, disposed_date, and created_date. I have them displaying as format MM/dd/yyyy in some @Html.EditorFor()'s.

What I'm attempting to do now is add a simple datepicker functionality, which is where I came across THIS post about using [DataType(DataType.Date)] attribute on my model properties. My created_date is currently set as:

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

This renders the dropdown functionality, but the value in the box appears exactly as "mm/dd/yyyy" instead of showing the actual value. For example, if I remove the [DataType(DataType.Date)] attribute:

    [Required]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime created_date { get; set; }

My value shows up as "02/10/2015" without the datepicker functionality.

Can anyone provide an example of how I can render this datepicker functionality but show the actual value of my field in the box (when a value is present)?

EDIT: The created_date field on my View is currently defined as follows (following Chris' suggestion I attempted to force the value to be in format YYYY-MM-DD):

    <div class="form-group">
        @*@Html.LabelFor(model => model.created_date, htmlAttributes: new { @class = "control-label col-md-2" })*@
        <span class="control-label col-md-2">Created Date:</span>
        <div class="col-md-10">
            @Html.EditorFor(model => model.created_date, new { htmlAttributes = new { @class = "form-control", @Value = Model.created_date.ToString("YYYY-MM-DD") } })
            @Html.ValidationMessageFor(model => model.created_date, "", new { @class = "text-danger" })
        </div>
    </div>

This renders the following code:

<input value="YYYY-02-DD" class="form-control text-box single-line" data-val="true" data-val-date="The field created_date must be a date." data-val-required="The created_date field is required." id="created_date" name="created_date" type="date">

Upvotes: 2

Views: 13061

Answers (2)

Nico
Nico

Reputation: 1202

This worked for me

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

Following Chris Pratt's Idea

Upvotes: 5

Chris Pratt
Chris Pratt

Reputation: 239360

I'm assuming you're also using the HTML 5 date input type, i.e. <input type="date">. The value for a date input type, must be an ISO formatted date: YYYY-MM-DD. The placeholder you see there is just the browser providing a more user-friendly display, but it's converting to/from the ISO format behind the scenes. If you don't provide a proper ISO date, then it's essentially treated by the browser as no value at all.

Upvotes: 2

Related Questions