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 !

About Yasser Shaikh

Hello, I am a Web Dev, employed with Media.Net where I primarily work on ASP.NET MVC and Angular JS based developement.

Questions? Enquiries? Comments? Or even just want to say “Hi” to me, you are welcome to all of that. Just drop me a message at “mail@yassershaikh.com” and I’ll get back to you as soon as possible.

Cheers !

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>