Add A Cool Date Picker With 2 Lines Of JavaScript

We have all seen drop down date pickers in web pages that are really convenient for the user. Let us see how we can build one with just 2 lines of JavaScript code. Yes, you read it right. 2 lines of JavaScript. You don't even have to know JavaScript to build a date picker in your web page.

For the impatient: Demo is here

Before: Traditional HTML form with input field
Visit the above link and take a look at the HTML only form fields that collect date information from the user. If you don't use a server side scripting language to generate the form fields you have to type a lot of select options to make it easier for the user. Populating the select fields with the desired option, especially in the case of failed validation, takes a bit more server side code. Most of you would agree that the user hates these kind of forms.

With JavaScript you can add user friendly features such as a date picker. With JavaScript toolkits like Dojo it is quite easy to build rich Internet applications. We already know we are doing it in 2 lines of JavaScript. With Dojo toolkit you write less code and offer great experience to the user.

On a side note, I can see some folks coughing at the mention of buzz word "RIA".

After: Let us transform our previous web page form field into a date picker. Visit the demo page.

Let us now build the web page step by step.

I will not emphasize on the above snippet because this post assumes you already are familiar with HTML.

Let us move forward to the interesting parts of the web page.

The above snippet imports tundra.css and dojo.css files from AOL CDN.

Dojo toolkit is a collection of JavaScript, CSS and HTML files. The entire Dojo toolkit is hosted by AOL and Google for all of us to use their networks. These hosts are better known as content distribution networks(CDN). Content from these URLs might already be cached on the visitor's browser because CDNs are used by many websites.

1^st JavaScript line in our web page:

The above code includes the main JavaScript file - dojo.xd.js and Dojo parser from AOL CDN. djConfig parses HTML and DOM when the document is loaded.

2^nd JavaScript line in our web page:

Dojo has great parsing functions which parse HTML and DOM quickly and efficiently. Dijit is a widget system using which you can build amazing Web 2.0 GUIs. dijit.form.DateTextBox is one such widget offered by Dojo. Our date picker uses this Dojo widget. The above snippet includes the Dojo parser and the dijit.form.DateTextBox widget.

Let us close the HTML head tag here.

Tundra is a dijit theme which brings a common design and color scheme to all the widgets. It is very important that you set the body tag's class to a dijit theme; tundra in this example. Otherwise the date picker will not work.

Dijit introduces a new attribute "dojoType". You simply add that to the tag you wish to make use of dijit. In the above snippet we add dojoType="dijit.form.DateTextBox to our regular input tag. This brings in the date picker to this form field. How easy!

We're done. So, close the body and html tags.

I am putting up the complete HTML document below so that you can grab it at once.

Useful links:
Dojotoolkit - http://dojotoolkit.org/
RIA - http://en.wikipedia.org/wiki/Rich_internet_application
CDN - http://en.wikipedia.org/wiki/Content_delivery_network
Web 2.0 - http://en.wikipedia.org/wiki/Web_2.0

P.S: I'm drafting another post which shows PHP programmers how to build a date picker without writing a single line of JavaScript. Stay tuned.