Using jQuery UI Datepicker in a Web Page - Expression Web
Posted by: Minal Agarwal
in Category Expression Web
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.
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.
Now add a textbox control (call it txtDate) to the page and write the following code in the <head> 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.
If you are using jQuery with ASP.NET Pages, you may find this eBook helpful 51 Recipes with jQuery and ASP.NET Controls