DisplayFormat stops UK dates displaying in Chrome?

Question

I have a property of my model as follows:

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

In my scaffolded MVC Core view I have this code to display that value:

<input asp-for="LiftingItem.DateManufactured" class="form-control" />

In Chrome, the input shows the text "dd/mm/yyyy" and I get the error:

The specified value "09/02/2006" does not conform to the required format, "yyyy-MM-dd".

Whereas in IE I get the actual date (e.g. "09/02/2006"). I think that difference is because Chrome is using the HTML 5 Date type input and so requires the format in "yyyy-MM-dd" format to display it?

If I remove the DisplayFormat attribute, sure enough it works in Chrome, but then in IE the date is in the wrong format ("yyyy-MM-dd" instead of "dd/mm/yyyy").

So, it seems like using DisplayFormat with a non "yyyy-MM-dd" format stops the Tag Helpers working? Is there any way to get it working nicely for both HTML 5 compatible and older browsers?

PS: I've also tried applying the formatting in the view instead using asp-format="{0:dd/MM/yyyy} as described in this question, but that also stops it working in Chrome.

Edit: I could also remove [DataType(DataType.Date)], but then I don't get the built in datepicker on HTML5 compatible browsers, which I would definitely like to on mobile devices.

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

Yes, you can combine the Tag Helpers with the DisplayFormat data annotation.

So, it seems like using DisplayFormat with a non "yyyy-MM-dd" format stops the Tag Helpers working? Is there any way to get it working nicely for both HTML 5 compatible and older browsers?

Just remove [DataType(DataType.Date)] from your model and the DisplayFormat(..) statement will start working as expected.

PS: I've also tried applying the formatting in the view instead using asp-format="{0:dd/MM/yyyy} as described in this question, but that also stops it working in Chrome.

You can combine the DisplayFormat(..) data annotation with the asp-format tag helper if you should require, in a specific view, a different date format than the one specified in your model.

If you have the following property in your model:

[DisplayName("Manufactured Date")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime? DateManufactured { get; set; }

and a view (a Detail view for instance) with the following line of code:

@Html.DisplayFor(model => model.DateManufactured)

Then you application will display dates having a format corresponding to the one specified with the data annotation, i.e. {0:dd/MM/yyyy}. Here's an example: 23/02/2017.

If you add in another view (an Edit view for instance) the following line of code (please note that I've added a 'M' to the month format):

<input asp-for="LiftingItem.DateManufactured" asp-format="{0:dd/MMM/yyyy}" class="form-control" />

Then the asp-format will take precedence over the model's data notation and your application users could type dates like this one: 23/Feb/2017 in the input box.

edited May 23 '17 at 11:47

Community

1
1

answered May 05 '17 at 16:33

Aquablue

294
3
4

Hey, thanks for this. The problem with removing the `[DataType(DataType.Date)]` bit is that you then don't get the browser's built in datepicker, which is a pain on mobile devices. Ideally I'd also prefer to use the browsers built in datepicker (where there is one) on the desktop too. – tomRedox May 12 '17 at 15:43
@tomRedox Yes your are right. By removing `[DataType(DataType.Date)]`, the type will not be set to be equal to date on the input element, i.e. you will not get this in your HTML code ``. Sadly the fact is that for Firefox, IE, Safari and old browsers you don't get a date picker with the data annotation above. – Aquablue May 16 '17 at 10:24
thank you, it's good to know I'm not going mad! Maybe trying to use the data annotations is the wrong approach then, perhaps I should be looking at some sort of conditional logic that checks for HTML5 browsers and sets the `input type` based on whether this a HTML5 browser. – tomRedox May 16 '17 at 10:27
I would suggest to handle date pickers with your JS/CSS code or even better, IMO the best solution, use a library like JQuery UI and the [Datepicker Widget](https://jqueryui.com/datepicker/). You will save a lot of time and the code works (and is tested) with most of the browsers ;) BTW Firefox (for instance) is an HTML5 browser but will not show the date picker even with the right data annotation. – Aquablue May 16 '17 at 10:40
Oups I made a mistake. I should have written: BTW Firefox (for instance, but other browsers too) is an HTML5 browser but will not show the date picker even if you set "by hand" the input type to be equal to date. – Aquablue May 16 '17 at 10:51

DisplayFormat stops UK dates displaying in Chrome?

1 Answers1