Using jQuery UI Datepicker in a Web Page

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 element of the page.

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 element

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;

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:

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:

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.