How to set correct date format in ASP.NET Core

Question

I am creating webpage using asp.net core. I am trying to change the default date format from English to Swedish in the format yyyy-MM-dd

This is my current model

[DataType(DataType.Date)]
[Display(Name = "Required delivery date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public Nullable<DateTime> DelDt { get; set; }

This is the razorpage

<td><label asp-for="Order.DelDt" class="control-label "></label></td>
    <td><input asp-for="Order.DelDt" asp-format="{0:yyyy-MM-dd}" tabindex=17 class="form-control"></td>

This is what it looks like

how can I change my code so that the date format showed in the image instead is showing the swedish date format yyyy-MM-dd

note: I have also tried to set the html tag to html lang="sv" without success.

Solution 1

What you're seeing in the browser is the localized date format provided by the user's OS (your OS, likely, in this case). There's a few things going on you should be aware of. First, since you're binding this field to a DateTime (with DataType.Date), Razor is generating an input with type="date". This is an HTML5 input type, which in supported browsers (all modern browsers) will trigger an actual browser "date" control.

Second, an HTML5 date input takes and returns ISO dates YYYY-MM-DD, but the display of that date shown in the input will be localized for the user. You cannot control this display; it is based on the user's culture settings on their OS. As a result, if you were actually using Swedish culture settings, the display here would be what you want. However, you're apparently using en-US culture settings on your OS, so that is what you're seeing. Again, you cannot control this; you just have to trust it will be right, or you can change your OS culture settings to see it in a different format.

Third, that covers supported browsers, but in unsupported browsers (pretty much just IE 9 and under), this will be rendered as a regular text input with no formatting and will allow free text entry by the user in those browsers. As such, if you need to support older browsers, you should use a polyfill or some date input library that will allow you mask/control user input. Depending on what library you end up using, you might be able to explicitly control the format, or it, too, may rely on culture settings, if it's properly localized. You'll need to consult the documentation for whatever library you end up going with.

Finally, if you want explicit control over this input, you can supply the type attribute yourself and set it to text.

<input type="text" asp-for="Order.DelDt" tabindex=17 class="form-control">

Then, you can use whatever client-side solution you like to format the date however you want. This has the benefit of presenting a unified experience across the board for all users and browser types. However, that is also a con as much as it's a pro. The date input type has deep integration on mobile devices and generally presents a far better user-experience there. If you do end up using a regular text input, you should ensure that whatever client-side library you use presents a suitable experience on mobile.

Solution 2

HTML5 date input type takes and returns ISO dates YYYY-MM-DD

.ToString("yyyy-MM-dd")

Solution 3

To display the date format in dd-mm-yyyy, please follow the instruction as mentioned below,

Data annotation should be like,

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

And view should be as followed,

 <label asp-for="StartDate"></label>
 <input asp-for="StartDate" class="form-control" />

Comments

[FortyTwo]

Converting DateTime format using razor

[Thomas Adrian]

it did not help, it is still showing mm/dd/yyyy in chrome (and I have swedish set in chrome language)

[Thomas Adrian]

well, thanks. but I have Swedish regional settings in windows and Swedish language in browser. still it display some other date format

[Chris Pratt]

Well, something is not correct. Regardless, the point remains that you cannot control this format here directly. It controlled by the browser, based on OS locale and culture settings. If it's not correct, then something with your OS locale and culture settings is not correct. Simple as that.

[Thomas Adrian]

I am not sure you are completely right, I have been working on other platforms and there it was possible to control the dates based on the html lang tag and language set in browser

[Chris Pratt]

There may indeed be some variability in how different browsers on different platforms handle this. That's not really the point, though. The point is this: you have no direct control of the formatting of the display here, only indirect control over the platform(s) you're testing on. If the display is not correct, there's some culture setting somewhere that is off.

[Thomas Adrian]

I just realized that I earlier switched to swedish in the browser but I did not set it as the default display language, after doing that, now everything is working without the need for any culture or asp tag settings. as long as the user have swedish as display language in browser the date is also in swedish format.