Add A Cool Date Picker With 2 Lines Of JavaScript

Loading
Submitted by sudheer on Sat, 01/24/2009 - 20:31


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.

Bookmark/Search this post with
About the author

Sudheer is an entrepreneur and software developer. Get more from Sudheer on Twitter.


Thanks

Submitted by Martin (not verified) on Thu, 12/03/2009 - 20:15.

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

Great

Submitted by Guest (not verified) on Mon, 12/21/2009 - 06:39.

Thanks for the useful information.

find more edu articles

Nice ..

Submitted by Yogananda on Sat, 01/02/2010 - 19:03.

interesting Article ...
Thanks for the useful information.

getting your datepicker to post

Submitted by Guest (not verified) on Wed, 03/17/2010 - 21:59.

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

Submitted by sudheer on Wed, 03/17/2010 - 22:52.

Wrap the input element in form tag and you're ready to go.

<form method="post" action="http://example.com/receive/data/here">
 <input type="text" name="date"  dojoType="dijit.form.DateTextBox"
                required="true" />
<input type="submit" value="submit" name="submit">
</form>

give its complete damo n

Submitted by Guest (not verified) on Thu, 12/22/2011 - 15:12.

give its complete damo n example

Hi can I use the above code

Submitted by Guest (not verified) on Tue, 03/23/2010 - 04:31.

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

Submitted by sudheer on Tue, 03/23/2010 - 12:26.

Feel free to use to in any fashion you wish

Fatal error: Uncaught

Submitted by Guest (not verified) on Tue, 03/30/2010 - 12:59.

This comment has been moved here.

Thanks

Submitted by Sander (not verified) on Fri, 11/12/2010 - 17:31.

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

Submitted by Faern (not verified) on Wed, 01/05/2011 - 00:23.

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

Submitted by Guest (not verified) on Tue, 08/09/2011 - 20:21.

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

Changing the output format

Submitted by Guest (not verified) on Sun, 09/25/2011 - 20:03.

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

Found it :-)

Submitted by Ed (not verified) on Sun, 09/25/2011 - 20:14.

The constraints datePattern does the job.

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

Submitted by Ed (not verified) on Mon, 09/26/2011 - 00:33.

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?

Security Risk?

Submitted by Ken (not verified) on Fri, 11/04/2011 - 00:36.

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

Submitted by sudheer on Fri, 11/04/2011 - 16:18.

What is the exact text of the error?

I found that the error was

Submitted by Ken (not verified) on Tue, 11/15/2011 - 00:57.

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

Submitted by Guest (not verified) on Thu, 11/17/2011 - 06:15.

Ken, just host it on your own https.

change date format

Submitted by Guest (not verified) on Tue, 11/15/2011 - 20:34.

How can I change the date format?

:(

Local CSS

Submitted by Luiza (not verified) on Thu, 11/17/2011 - 15:46.

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

Submitted by sudheer on Fri, 03/02/2012 - 23:43.

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

Submitted by Beatrice Pereira Goncalves (not verified) on Fri, 03/02/2012 - 09:08.

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

My brother suggested I might

Submitted by Sophia Pereira Dias (not verified) on Fri, 03/23/2012 - 10:40.

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

Submitted by Alan Georg (not verified) on Sat, 03/24/2012 - 09:18.

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

Submitted by Thomas C. Cox (not verified) on Sat, 03/24/2012 - 15:35.

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

great blog

Submitted by santa (not verified) on Mon, 03/26/2012 - 17:22.

great blog

THANKS

Submitted by SV (not verified) on Thu, 03/29/2012 - 14:00.

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

Internet Explorer

Submitted by Siya (not verified) on Mon, 05/21/2012 - 13:37.

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

Submitted by Siya (not verified) on Mon, 05/21/2012 - 14:03.

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

css issue

Submitted by SABA (not verified) on Sat, 08/11/2012 - 18:21.

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

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>. The supported tag styles are: <foo>, [foo].

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
By submitting this form, you accept the Mollom privacy policy.