Using jQuery UI Datepicker in a Web Page - Expression Web

Posted by: Minal Agarwal , on 12/5/2010, in Category Expression Web
Views: 137015
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

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

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

Feedback - Leave us some adulation, criticism and everything in between!
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
Comment posted by max on Saturday, April 26, 2014 4:43 AM
hey thanks bro.. its useful
Comment posted by JQuery Datepicker using mvc5 on Monday, April 28, 2014 7:36 AM
Comment posted by riddhima on Friday, September 12, 2014 10:56 AM
Is it possible to add my own dates (events) in the calendar? Pl guide me in this regard.
Comment posted by krishna rana on Wednesday, January 14, 2015 11:45 PM
its great, solved my problem,
please also tell me, how can i learn jqyery easily, please provide me some reference material,
Comment posted by krishna rana on Wednesday, January 14, 2015 11:47 PM
pls provide me reference material to learn jqyery at, or,
Comment posted by Minal on Thursday, January 15, 2015 9:07 PM
You can always get our book to learn more at