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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LAMPComputing.com Dojo Date Picker Example</title>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.
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>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.
1st JavaScript line in our web page:
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>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.
2nd JavaScript line in our web page:
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>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.
</head>
Let us close the HTML head tag here.
<body class="tundra">
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.
<input type="text" name="date" dojoType="dijit.form.DateTextBox"
required="true" />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!
</body> </html>
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LAMPComputing.com Dojo Date Picker Example</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<input type="text" name="date" dojoType="dijit.form.DateTextBox"
required="true" />
</body>
</html>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.
Tech Chorus by Sudheera Satyanarayana is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 India License.
Based on a work at techchorus.net.
Permissions beyond the scope of this license may be available at http://techchorus.net/contact.
Thanks
Hi!!!
Thanks a lot! Very useful and easy of access information and it come in handy!!!
Great
Thanks for the useful information.
find more edu articles
Nice ..
interesting Article ...
Thanks for the useful information.
Thanks & Regards
Yogananda Naidu T
getting your datepicker to post
hi there... how may I format your code so that I can get it to POST in a form?
Thank you!
Wrap the input element in
Wrap the input element in form tag and you're ready to go.
Sudheer
Binary Vibes
Post new comment