CODEWITHSUNDEEP
c#asp.net-corerazor-pages
Thomas Adrian
Thomas Adrian

Reputation: 3636

How to set correct date format in ASP.NET Core

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

enter image description here

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.

enter image description here

Upvotes: 3

Views: 16984

Answers (4)

John
John

Reputation: 323

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" />

Upvotes: 1

Владислав Клишин
Владислав Клишин

Reputation: 21

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

.ToString("yyyy-MM-dd")

Upvotes: 2

Chris Pratt
Chris Pratt

Reputation: 239200

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.

Upvotes: 3

Alexandr Sargsyan
Alexandr Sargsyan

Reputation: 724

You can globally change your localization settings by putting this piece of code in the Configure method

var ci = new CultureInfo("sv-SE");
app.UseRequestLocalization(new RequestLocalizationOptions
{
    DefaultRequestCulture = new RequestCulture(ci),
    SupportedCultures = new List<CultureInfo>
    {
        ci,
    },
    SupportedUICultures = new List<CultureInfo>
    {
        ci,
    }
});

Upvotes: 0

Related Questions