Thursday, March 24, 2011

Using JQuery Datepicker in Master Pages

I will cover 2 points here.
1. Using JQuery's DatePicker
2. Using it in Master Page, Content Page situations

To use JQuery's DatePicker, you should have access to JQuery and JQuery UI libraries. You can either use CDNs(Content Distribution Networks) or have JQuery libraries in your site.
The libraries have both JavaScripts and CSS files.
I have used Google CDN for JQuery & JQuery UI javascripts. And for the CSS part, I have downloaded them to my site. And the reason is, I could not get CSS running if used CDN for it!

Time to get dirty.
In the master page's head section, add the links to the libraries






Once you get the libraries, in the content page, drag & drop a asp:TextBox and add the jquery code to attach the datepicker to the textbox.
It should look like below.





If you are not using master page, you can replace $('[id$=TextBox1]') with $("#TextBox1"). Thats it! Just 4 files to link and 2 lines of code will get you a beautiful Datepicker on your page.
Happy coding!

3 comments:

  1. thank you very much. this works.

    http://vcobenefits.byetshost13.com

    ReplyDelete
  2. not so much...doesn't work...I get the following error on my content page:
    "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"

    ReplyDelete