Step 1 – follow the instructions of the jQuery UI documentation 00:00

Choose which components you need
The datapicker is here it depends only on UI core

Select a theme
I will go for a standard theme - Dark Hive

Choose a version of jQuery UI
Well, I choose the latest version... 1.7.2

Actually the three above steps can be setup on the download page.
The customized download is downloaded.04:00

Step 2 – Unpack, explore and include code!

I have downloaded the customized version and it contains all the files needed to use UI.
Actually the best thing is to open the index.html file. in it you can see how to organize your code.
I however do not want to use the bundled version of jQuery, I prefer to use Google Code as you can see in the codeblock below.

If you choose to use the Google code way of implementing it, you must put the jquery-ui-1.7.2.custom.min.js *after* the Google Code 13:00


Easy... Hmm... well, when you first get up and running, preferably just copy'n'pasting the downloaded code (!) it is easy!.
Not only is it easy, it is very powerfull, cool , and safe to use!. In "old days" (some 2 years ago) having styled widgets like this would require a lot of coding, and things like themes were probertly extra.
I see greate potentials in jQuery UI, so go ahead and use it!25:00


Version notes

Version 1:
  • The 25 minutes basic page, added no more than one example datepicker

Sten Hougaard

My blog where you can leave comments about this article



I have choosen not to spekulate on other aspects like for instance the size of library code (related to page speed).
After having added the jQuery UI the page did not validate on CSS
Include jQuery and setting up the datepicker HEAD
<link type="text/css" href="css/dark-hive/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  google.load("jquery", "1");
  google.setOnLoadCallback(function() {
  // Datepicker
    inline: true

  //hover states on the static widgets
  $('#dialog_link, ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); },
		function() { $(this).removeClass('ui-state-hover'); }
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

<input type="text" id="datepicker" name="datepicker" class="datepicker" />