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

  • 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);

    Monday, May 3, 2021 5:16 PM

Answers

  • 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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 4, 2021 2:56 AM

All replies

  • 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

    Monday, May 3, 2021 5:34 PM
  • 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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 4, 2021 2:56 AM
  • User1778916669 posted

    Hi YihuiSun,

    Thanks a lot.

    Regards,

    DaddyCool123

    Monday, June 21, 2021 5:19 PM