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


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 !