Customizing Templated :

In the ASP.NET MVC Framework, the default DateTime editor template renders a simple textbox for date input. To enhance this, we can customize the template to integrate a jQuery calendar for a better user experience. The desired output should appear as shown in the image below.

---

Creating a Custom DateTime Editor Template

1.If your project does not already have a Shared folder inside the Views directory, right-click on the Views folder and create it.

2.Inside the Shared folder, add a new folder named EditorTemplates.

3.Right-click on the EditorTemplates folder and create a partial view named DateTime.

4.Open the DateTime.cshtml partial view and insert the following code.

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : string.Empty), new
{
    @class = "date"
})
                                        

Step 5. Insert the following code into the Edit.cshtml view.

@model TemplateHelpersMVC.Models.Employee 
@{
    ViewBag.Title = "Edit";
    Layout = null;
}
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" /7>

<script type="text/javascript">
    $(function()
    {
        $("input:text.date").datepicker(
        {
            dateFormat: "dd/mm/yy"
        });
    });
</script>
<div class="container">
    <div class="row">
    <div class="col-md-offset-3 col-md-6">
@using (@Html.BeginForm())
{
    <h2>Edit Employee</h2>
@Html.EditorForModel()
    <br />
    <input type="submit" value="Save" />
            }
        </div>
    </div>
</div>
                                        

Run the application, and you will notice that the jQuery date picker is now being used to display the DateTime as expected. To ensure proper functionality, download the latest versions of jQuery and jQuery UI from NuGet. If there is a version mismatch, the date picker may not work correctly.