How to Add jQuery Datepicker in MVC

Introduction

In this example, we will describe how to add a jQuery Datepicker to an MVC application. jQuery is one of the widely used scripting languages for web development. jQuery provides built-in support for a DateTime picker. In this article, I explain how to add a jQuery Datepicker with MVC.

The following is the procedure to add the jQuery Datepicker to an MVC application.

Step 1. Go to New Project and select the Web tab and select ASP.Net Web Application. Provide a suitable name for your project, such as DateTimeDemo, and click the OK button.

Step 2. Then the following screen will appear. Select the MVC tab and click the OK button.

Step 3. A project solution has been created with some pre-defend controllers, scripts and so on. Now go to the Model folder and a class called Employee with three auto-implemented properties like.

public class Employee  
{  
    [Required]  
    [Display(Name = "Id")]  
    public int EmpId { get; set; }  
    [Display(Name = "Name")]  
    [Required]  
    public string EmpName { get; set; }  
    [Required]  
    [Display(Name = "Date Of Birth")]  
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MMM/yyyy}")]  
    public DateTime DOB { get; set; }  
}  

In this code, I have done some basic Data annotation validation with all those three properties. You can ignore if you want.

Step 4. Now go to the Controllers folder and right-click on the Add Controller option then the following window will appear. Select MVC5 Controller-Empty. Provide a name for the controller, say Employee, and click on the Add button.

Step 5. Controller code will be automatically generated with one Index action method like.

public class EmployeeController : Controller
{   
    // GET: Employee   
    public ActionResult Index()
    {   
        return View();
    }   
}

Step 6. Right-click anywhere on the Index action method and click add view then select the Employee model class and add that view of type Create as in the following.

Step 7. Then the Employee Create view will be automatically generated with the following code.

@model DateTimeDemo.Models.Employee
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Employee</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.EmpId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmpId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmpId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmpName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmpName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control", placeholder = "Employee Date Of Birth", @readonly = "true" } })
                @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
}