JQuery Datepicker with MVC3

Datepicker is a control that you can easily use as a popup with text field to input date. Here I'm trying to cover all the necessary coding parts to implement a date picker in MVC 3 application.

Firstly, we'll write a JQuery script

Before you work with the above script you will need to add following directives.

You can add above directives to either in you page where your jquery script written or if your page refers the common _layout.cshtml, then you can move these directives into tag of the _layout.cshtml.

Secondly,

We need to call the datepicker from the control where you need to connect the datepicker. Here we will going to link our date picker with a text field as below.

@Html.LabelFor(model => model.ExpireOn)

@Html.TextBox("ExpireOn", (Model.ExpireOn.ToShortDateString()), new { @class = "date" })

@Html.ValidationMessageFor(model => model.ExpireOn)

You can download complete code sample here