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>techchorus.net 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>techchorus.net.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.

Taxonomy upgrade extras: 

Comments

Hi!!!
Thanks a lot! Very useful and easy of access information and it come in handy!!!

Thanks for the useful information.

find more edu articles

interesting Article ...
Thanks for the useful information.

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 form tag and you're ready to go.

give its complete damo n example

Hi sudheer,

Hey can I use your code in my website........... Is it ok with you....

Please let me know if you have any problem.
waiting for your reply
Thank you,
Haribabu Bavanari

Feel free to use to in any fashion you wish

This comment has been moved here.

thanks. I couldn't imagine it is so easy. I like JavaScript language. There is so much information about it. It is very convenient.

Great tutorial! Thanks! This helped me a lot because I didn't have any good error reporting. It made troubleshooting a lot harder. Blessings to you!!

It looks cool. Can you please tell me how can I use it with my Swing Components? I have a frame that pops up when a user clicks a link. This frame has user information and Start and EndDate text fields for which I want to use your code.

Thanks in advance.

Richard

How can I change the output format? I need YYYY-MM-DD format as output.
I'm thinking about downloading the JS files, modify the code and put them on my server.

Or is there an easier way?
Thanks in advance
Ed

The constraints datePattern does the job.

DateTextBox embedded in form just doesn't want to send the data,

All other input items send the value as set in the form... Anyone an idea on this?

This is great to know about and works perfectly. However, I found that on IE and the default HTC Android browsers it causes a security warning. This didn't happen with Chrome or Safari. How do I prevent this code from causing the security message. If you click 'Allow' on the message, it still shows date picker, but its an annoyance to do that every time you load the page.

Ken

What is the exact text of the error?

I found that the error was caused because my site is being hosted on an https web server, while this method requires you to reference an http web server in the import line. I read online that there is no way to avoid or suppress this error when it is caused by this scenario. Is there any alternate CDN address to make this trick work that is provided on an https site?

Ken

Ken, just host it on your own https.

How can I change the date format?

:(

Hello,

First of all, thanks very much for your tutorial, it is very well written and the date picker works fine. I want to add it to a website I am building but my form fields are blue and the sample ones are white, fort his reason I copied and saved the css files on my root so I could change the field color, I added some credits to your website on my code btw.

The problem I get is tundra.css has some images I need to add to my local root too. Am I OK to get the images/ folder and add it to my root? For some reason I can't find this image folder on your site...

Thanks,

You can serve the images either locally or from a CDN. Down the Dojo Toolkit library and serve it from your web server.

Anyway, I do not go along on a point or two while the remaining seems sensible.

My brother suggested I might like this web site. He was once totally right. This publish truly made my day. You can not imagine simply how so much time I had spent for this info! Thank you!

Just wish to say your article is as amazing. The clearness on your submit is simply spectacular and that i can think you are knowledgeable on this subject. Fine with your permission allow me to grasp your feed to stay updated with drawing close post. Thank you one million and please keep up the rewarding work.

A display of excellence. This is precise and also relevant.

great blog

Thank you for the succesful articles that out of error....=D

Hi, firstly let me say that this is really good. i'm working on a website and i added your code for the date picker on a blank page just to check how it works.. on Chrome, Firefox and Opera it works without fail, however on IE... the field just stays blank with no pop-up. can this be fixed or is IE excluded from this? Thanks again.

oops, disregard my previous problem it just sorted itself out... thanks again

hi,
when i am using this date picker code i am getting css issue.
this css class which you are include in this html over write my css class.
I n my application i am also using one css file for my whole page so any one can solve my problem

Hi,

While at first I was very enthousiastic about this calendar, as soon as I implemented it in the webpage I was designing, my whole markup was changed because of Dojo.

This calendar was only a convenience in an input field but Dojo fiddled with all my headings (h1,h2, h3...). These are key elements in a design an should not be meddled with by a third party.

There were other interferences as well such as the text alignment. All this cost me hours to redefine and correct the stylesheet.

Great idea, but not user friendly.

Kind regards

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.