CODEWITHSUNDEEP
c#razorasp.net-core
3snoW
3snoW

Reputation: 153

Date formats in input forms - C#

I've been following this tutorial to learn ASP.NET Core MVC with Entity Framework. My problem is that when I run my solution and try to add a new entry on the students table using my browser, it automatically imposes a date format in the form of MM/dd/yyyy, as shown here. I want it in the format yyyy-MM-dd.

My Student model is the following:

public class Student
{
    public int StudentID { get; set; }
    [Required]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
    [Required]
    [Display(Name = "First Name")]
    public string FirstMidName { get; set; }
    [Display(Name = "Enrollment Date")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime EnrollmentDate { get; set; }

    public ICollection<Enrollment> Enrollments { get; set; }
}

And in my view, the date input is implemented as follows:

<div class="form-group">
    <label asp-for="EnrollmentDate" class="control-label"></label>
    <input asp-for="EnrollmentDate" class="form-control" />
    <span asp-validation-for="EnrollmentDate" class="text-danger"></span>
</div>

What's even weirder is that the specified format works outside input forms, such as here, in the index page where it shows every student in the table.

I can't seem to find a solution for this problem anywhere, most people just say to add ApplyFormatInEditMode = true on the data annotation and it should work.

Any help is appreciated, thanks in advance!

Upvotes: 0

Views: 8998

Answers (2)

Fran
Fran

Reputation: 6520

This problem occurs because of the [DataType(DataType.Date)] declaration on your EnrollmentDate. When the page is rendered, this element is converted to 

<input type="date">

When the browser sees this it will impose its own internal datepicker on the input element if it supports it. Here's a nice link to all the information on the Mozilla site.

One problem with this is every browser has its own styling/conventions, which makes for a different user experience across platforms.

You can write a tiny piece of JavaScript to overwrite the data type on the client and replace the browser datepicker with a common one. This example just 

$("input[type=date]")
    .datepicker({ dateFormat: "yy-m-d", changeYear: true, yearRange: "-4:+0" })
    .attr("type", "text");

Note how in the last line we change the type attribute to text.

And one issue is that it relies on the view model date formatting for the initial load and the javascript to format when using the datapicker.

Upvotes: 1

3snoW
3snoW

Reputation: 153

Sean T pointed out that a solution already existed here.

Apparently this has nothing to do with C# or anything, it has to do with the way browsers handle date input and try to use a format that the user is more familiar with.

So, to change this behavior on Google Chrome (the browser I use), I followed these steps.

For reference, here are instructions on how to do it in Firefox. Couldn't find for Opera, and Edge seems to either not have a way to change this, or it's bound with windows' regional settings (see this).

Upvotes: 0

Related Questions