Using jQuery UI Datepicker in a Web Page - Expression Web

Posted by: Minal Agarwal , on 12/5/2010, in Category Expression Web
Views: 107126
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 a +1 to this article if you think it was well written. 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 Foodatarian.com. 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 http://forums.asp.net/t/1423170.aspx

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
j
Comment posted by max on Saturday, April 26, 2014 4:43 AM
hey thanks bro.. its useful
Comment posted by JQuery Datepicker using asp.net mvc5 on Monday, April 28, 2014 7:36 AM
http://mamundubd.blogspot.com/2014/02/jquery-ui-datepicker-popup-calendar.html

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