Razor Pages - Date format in the "form-row input-group"

Question

User1778916669 posted

Date is displayed as mm/dd/yyyy.

I would like to display date in my filter section as dd/mm/yyyy. 

No idea how to approach it.

web.cshtml code

<form method="get">
            <div class="form-row input-group">

                <div class="col-sm-2">
                    <input type="date" class="form-control" placeholder="Start date" asp-for="StartDate">
                </div>    
              
            </div>
</form>

web.cshtml.cs code

        [DataType(DataType.Date)]
        [BindProperty(SupportsGet = true)]
        public DateTime StartDate { get; set; } = DateTime.Now.AddYears(-1);

Answer 1

User475983607 posted

You are using an HTML 5 date input.  The date must have a yyyy-MM-dd format.  This issue has little to do with ASP.NET.  The browser is driving the UI.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Answer 2

User1686398519 posted

Hi DaddyCool123, 

You can specify the input type as text, and use DisplayFormatAttribute to specify the display and format of the data field.

Then you can use jquery Datepicker to select the date.

• utility-formatDate

Model

    public class TestDateFormat
    {
        [DataType(DataType.Date)]
        [BindProperty(SupportsGet = true)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime StartDate { get; set; } = DateTime.Now.AddYears(-1);
    }

View

@model DailyCoreMVCDemo.Models.TestDateFormat
<link href="~/jqueryui/jquery-ui.css" rel="stylesheet" />
<form method="get" asp-action="test">
    <div class="form-row input-group">
        <div class="col-sm-2">
            <input type="text" class="form-control" placeholder="Start date" asp-for="StartDate">
        </div>
        <div class="col-sm-2">
            <button type="submit">submit</button>
        </div>
    </div>
</form>
@section scripts{
      <script src="~/jqueryui/jquery-ui.js"></script>
      <script>
            $(function () {
                $("#StartDate").datepicker({ dateFormat: 'dd/mm/yy' });
            });
      </script>
}

Best Regards,

YihuiSun

Answer 3

User1778916669 posted

Hi YihuiSun,

Thanks a lot.

Regards,

DaddyCool123