Next step of programming

Using JQuery UI in ASP.NET MVC

with 17 comments

I was developing one application in ASP.NET MVC, where i was in need of displaying Date Picker to the user. But if you generate View with the help of MVC extension then it will display text box for your date field. In order to show the datepicker i used jquery datepicker.
You can download it from JQuery UI here

Step 1

• Include these files in your project. in the script folder

jquery-1.3.2.js
ui.core.js
ui.datepicker.js

Also include the theme folder in project to apply the themes for the respective controls

• Add the Script reference in your webpage, for that include the following code

<script type="text/javascript" src="/../../Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.core.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.datepicker.js"></script>

• Include the following script in your view page(where you want to show the date picker) giving it a ID. On that ID we will use it as a input. ID should be unique

<script type="text/javascript">
 $(document).ready(function(){
$("#FromDate").datepicker();
});
</script>

Step 2

• We need to create a Extension for HtmlHelper Class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
public static class DatePickerExtension
{
public static string DatePicker(this HtmlHelper htmlHelper, string name)
{
return "<input type=\"text\" id=\"" + name + 
"\" name=\"" + name + "\" value=\"\"/>";
}
}
}

• In your view page you have to add the following code to have that control

 <label for="fromDate">From date:</label>             
<%= Html.DatePicker("FromDate")%>

Output :

JQuery UI DatePicker

---

Possibly related posts: (automatically generated)

• if you like that, try this
• Resolving conflicts on DWR with jQuery
• jQuery: The Basics

17 Responses

Subscribe to comments with RSS.

1. [...] Next step of programming, A.Sethi: Using JQuery UI in ASP.NET MVC [...]

   This Week in jQuery UI vol. 5 « jQuery UI Blog

   April 10, 2009 at 12:55 pm

   Reply
2. How would you use this DatePicker if you had a table of Events that need displaying on the public side of a website not a CRUD scenario?

   

   Jon

   April 29, 2009 at 9:56 am

   Reply
   • Jon

     Can you give more details on your requirement.

     

     A.Sethi

     April 30, 2009 at 5:39 am

     Reply
     • I have a table in a database which contains event information eg/date, where, cost of admission, details. I need to display these details somehow and I thought that the datepicker might work (I’m not sure how else you would display it) but when you visit the Events page you would need to take the data out of the table and wire it up to the DatePicker which would highlight days that events are on and then have a link to the details page.

       

       Jon

       April 30, 2009 at 8:21 am
3. nice, thanks

   

   Jeff

   April 30, 2009 at 1:08 am

   Reply
4. For the upcoming 0.9.0 PrimeFaces release I’ve migrated PrimeFaces to use jQuery for Dom manipulation and Ajax purposes. Along the way I’ve faced an issue where jQuery doesn’t play well with the JSF clientIds containing the colon “:” so special characters like this need to be escaped.

   

   ZK@Web Marketing Blo

   June 21, 2009 at 6:41 am

   Reply
   • thanks for nice and useful information. i will also have look to it

     

     A.Sethi

     June 21, 2009 at 10:47 am

     Reply
5. what the heck does this sentence even mean??

   >>Add the Script reference in our page for that include the following code the page of yours

   

   whiskey tango

   June 23, 2009 at 3:20 pm

   Reply
   • Sorry that was mistake and now it is corrected. Thanks for correction

     

     A.Sethi

     June 23, 2009 at 6:33 pm

     Reply
6. thank you for this!

   

   whiskey tango

   June 23, 2009 at 3:30 pm

   Reply
7. Why do we need to create HtmlHelper extension class?

   

   Corneliu

   September 28, 2009 at 10:14 pm

   Reply
   • We can directly write the tags also in the html page rather writing the extension class. But since we are going to use this date picker in various screens again and again so if i will create this extension class then i will just call HtmlHelper.DatePicker function and it will be automatically replaced by the code as in other controls like textbox etc

     This extension class will add my method to the existing HtmlHelper class

     for more on extension method check this link
     http://msdn.microsoft.com/en-us/library/bb383977.aspx

     

     A.Sethi

     September 29, 2009 at 4:34 pm

     Reply
8. Thanks for you post, but I figure out an easier way (well, as far as I can see now). You don’t need to create helper classes and/or extension methods. See my post on: http://blog.vanmeeuwen-online.nl/2009/10/easy-way-to-use-jquery-datepicker-on.html

   

   Rob

   October 1, 2009 at 12:31 pm

   Reply
9. I installed per above, and I copied the jQueryUI base themes into my App_Themes folder, but I don’t think my datepicker is seeing it’s themes. For example, the datepicker is transparent, and the Prev and Next are not well formatted.

   

   MikeC

   November 1, 2009 at 1:30 am

   Reply
   • Ok, all set. Just needed to add a reference to the css file in my master page.

     

     MikeC

     November 3, 2009 at 2:58 pm

     Reply
     • Yes you are correct. You can have various themes also by including different css, check the JqueryUI website

       

       A.Sethi

       November 4, 2009 at 5:33 am
10. Jon

    I created one sample application using jMonthCalendar in asp.net mvc. you can see and download sample from http://towardsnext.wordpress.com/2009/04/30/event-calendar-in-mvc-application-using-jmonthcalendarjquery/

    anything else update me

    

    A.Sethi

    April 30, 2009 at 5:35 pm

    Reply