How do I show the DateTime in the view using the DataType.Date data annotation?

Question

I am having problems getting the DateTime object from my model to display in the date time picker. Originally, I treated it as text with a particular format using the DisplayFormat DataAnnotation.

I have tried adding the DataType DataAnnotation. I have tried adding the Required DataAnnotation I have tried changing the DisplayFormat to dd/MM/yyyy.

I have seen datatype.date annotation not showing calendar in firefox and have tested with the latest version of Chrome and Firefox.

Original Billing.cs

[DataMember]
[Display(Name = "Start Date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy MMM dd}")]
public System.DateTime StartDate { get; set; }

Tested with Billing.cs

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

Edit.cshtml

<div class="form-group row">
    @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "col-form-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
    </div>
</div>

I was expecting to see the date being shown in the date picker. But instead I see the "dd/mm/yyyy" placeholder.

If I view page source, I do see that the page does indeed get the expected date from our database.

<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="StartDate" name="StartDate" type="date" value="01/01/2018">

I am not sure if I am missing anything else or not.

amsga · Accepted Answer · 2019-10-03 05:23:52Z

1

After further testing with the date format, I did not expect that the browser was expecting the date value to be in the form of "yyyy-MM-dd".

After changing the DataFormatString value from my currently used format to "yyyy-MM-dd", the date picker was able to show the correct date.

answered Oct 3, 2019 at 5:23

amsga

7816 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I show the DateTime in the view using the DataType.Date data annotation?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related