Introduction to jquery Date Picker in ASP.NET MVC

In this article, I am going to show how to integrate jquery Date Picker with ASP.NET MVC project.

Step 1 : Import jquery.js and jquery-ui.js files

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.min.js")" type="text/javascript"></script>

Step 2 : Define a DateTime property in model

public class TaskModel
    public DateTime TaskScheduled { get; set; }

Step 3 : Declare Razor textbox for Date Time input using the model.

Note that I have defined a class called “date”, which I will be using in my jquery call and bind it to my textbox.

<div class="editor-label">Scheduled for :</div>
<div class="editor-field">@Html.TextBoxFor(m => m.TaskScheduled, new { @class = "date" })</div>

Step 4 : and finally some javascript code :)

$(document).ready(function() {</p>
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });

**Ouput : and voila your date picker is ready to serve :) **

Hope you found this useful. Cheers !