datepicker not visible with the date in edit form

Question

I am trying to do a editForm , which is getting all the values correctly from the database. The problem is that either the date is visible or just datepicker. The 'View Page Source is showing the correct value' This is how I am displaying the property in Model

   [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DateOfBirth { get; set; }

I have tried both the input tag and the @Html tag and both give different results With just the input tag it just shows the datepicker with dd/mm/yyyy

                    <div class="form row">
                        <div class="form-group col-md-6">
                            <label asp-for="DateOfBirth" class="col-auto col-form-label small form-text">Date Of Birth</label>
                            <div class="col">
                                <input asp-for="DateOfBirth" class="form-control ui-datepicker" type="date" placeholder="Date of Birth" value="@Model.DateOfBirth.ToShortDateString()" asp-format="dd/mm/yyyy" />

and with the @Html it just shows the correct date but not datepicker

  @*@{
                                    string parameterValue = @Model.DateOfBirth.ToShortDateString();
                                }
                                @Html.TextBoxFor(m => parameterValue, new { @class = "form-control ui-datepicker" })*@
                                <span asp-validation-for="DateOfBirth"></span>
                            </div>
                        </div>

How can I get both the date and datepicker displayed in the edit form?

Answer 1

just the input tag it just shows the datepicker with dd/mm/yyyy

1. This is because you specified the type of input as date.
   • type="date"
2. About <input type="date">,you need to know:
   1. The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
   2. Therefore, when your input value is not in yyyy-mm-dd format, it will not be displayed correctly.
   3. input elements of type="date"

How can I get both the date and datepicker displayed in the edit form?

1. I suggest you combine jquery Datepicker to achieve your needs.
2. I wrote an example, you can refer to it.
   1. You need to reference the jquery-ui.css and jquery-ui.js files.
      • You can install jqueryui by right-clicking wwwroot and selecting Add->Client-Side Library.
      • 
   2. Model

      • public class TestDate
        {
           [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
           public DateTime DateOfBirth { get; set; }
        }
        

   3. Controller

      • public IActionResult Index()
        {
          TestDate model = new TestDate {  DateOfBirth=DateTime.Now};
          return View(model);
        }
        

   4. View

      • @model WebApplication24.Models.TestDate
        <link href="~/jqueryui/jquery-ui.css" rel="stylesheet" />
        <input asp-for="DateOfBirth" type="text" class="form-control" placeholder="Date of Birth" />
        @section scripts{
            <script src="~/jqueryui/jquery-ui.js"></script>
            <script>
                $(function () {
                    $("#DateOfBirth").datepicker({ dateFormat: 'dd/mm/yy' });
                });
            </script>
        }
        

   5. Result
      • 

Answer 2

Changed the input to this and it solved the issue

`<input asp-for="DateOfBirth" class="form-control ui-datepicker" type="date" placeholder="Date of Birth" value="@Model.DateOfBirth.ToString("yyyy-MM-dd")" />