Using jQuery UI Datepicker in a Web Page - Expression Web

Posted by: Minal Agarwal , on 12/5/2010, in Category Expression Web
Views: 104132
Abstract: In this article, we will see how to use the jQueryUI Datepicker widget in your web pages created using Expression Web.

The jQuery UI library includes a rich set of widgets and effects that you can use in your HTML applications. One such widget is the jQuery Datepicker widget. The jQueryUI Datepicker is a highly configurable widget to quickly add datepickers to your web pages.

Let us see how to use the jQueryUI Datepicker widget in your web pages using Expression Web. This article assumes you are familiar with jQuery. If not, take a quick jQuery course here.

Launch Expression Web and create a new HTML Page (File > New or click on the New Document icon on Standard toolbar and choose HTML). Add the following links in the <head> element of the page.

jQuery CDN Links

We have added the following three files above:

  • jQuery UI theme (jquery-ui.css) - A link to a CSS file to import the Smoothness theme. The jQuery UI supports different themes and the smoothness theme is just one amongst them. 
  • The jQuery library (jquery.min.js) — The jQuery library which handles DOM manipulations, CSS, AJAX, Events and Animations on your page. The jQuery UI library depends on the jQuery library. 
  •  The jQuery UI library (jquery-ui.min.js) — The jQuery UI library which contains all the jQuery UI effects and widgets such as the Datepicker widget.

Note: The CSS and jQuery script links shown above are taken from the Microsoft Ajax Content Delivery Network (CDN). These links from CDN enables you to easily add popular JavaScript libraries such as jQuery to your Web applications, without having to download the jQuery scripts and manually referencing them in your pages.

Now add a textbox control (call it txtDate) to the page and write the following code in the <head> element

Datepicker Text Box

Do you know that if you view the webpage in a browser and focus the cursor (click or tab) inside the textbox, you will see a fully functional Datepicker control? See below;

DatePicker UI

But there’s a lot more to the Datepicker control. The Datepicker control is highly configurable. So let us say if we want to display multiple months at the same time, use the
numberOfMonths option as shown below, which displays two months instead of one:

numberOfMonths Datepicker

Multiple Month DatePicker

Similarly, to show the year as a dropdown and limit the years from 2008 to 2012 only, use the changeYear and yearRange option as shown below:

change Year Range DatePicker

Year DropDown DatePicker

I hope you now see how highly configurable the Datepicker widget it. You can see a bunch of other Datepicker options over here. So play around with them and let me know your experience!

You can download the HTML source code over here.

If you are using jQuery with ASP.NET Pages, you may find this eBook helpful 51 Recipes with jQuery and ASP.NET Controls

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Follow her on twitter @ saffronstroke

Page copy protected against web site content infringement by Copyscape

User Feedback
Comment posted by Paulo on Tuesday, December 7, 2010 10:19 AM
Source code as images? Really? It would suck badly if it was gif or png images, but jpeg images are even worse! It looks completely blurry besides being impossible to copy+paste somewhere. Microsoft-related websites and professionals never cease to amaze me, after so long still not "getting" the internet. If you are going to copy protect 5 measly lines of completely basic code, please refrain from writing tutorials.
Comment posted by Carol on Tuesday, December 7, 2010 7:01 PM
Paulo: Thanks for the feedback. The source code is available as a free download  for those who need it.
Comment posted by Thanks for nice article on Wednesday, December 8, 2010 3:41 AM
Thanks for this article, one typical problem usually we faced is using JQuery with ASP.NET Validators.

details are at

Comment posted by matthew moore on Friday, March 11, 2011 10:37 AM
Is there a way to have two calendars on one page ..example . i have one where it is pickup date and return date. I tried to put the calendar on both but it fails. I did not know if there was an easy way. is it because it is .datepicker and i need to make it #datepicker and change alot of css ? Please let me know your thoughts.

i can show you on my test board if need be. Thanks.
Comment posted by Robert on Monday, December 19, 2011 8:25 AM
I like your article and the calendar that is presented. One issue I am having is how to access the date once it is in the input control. I am sure this is simple but I do not know how this is done. Any help you are willing to give would be greatly appreciated.
Comment posted by radhika sharma on Thursday, May 2, 2013 6:33 AM

Post your comment
E-mail: (Will not be displayed)
Insert Cancel