JavaScript date chooser
If you have questions or comments or bugs report, or a change to make, be sure to use the project’s new homepage: Flexible JS Formatting Libraries
I wrote this date chooser because the ones I could find on the Internet were crummy, too complicated, or not free. The point is to make form entry more usable and help the user enter valid data (of course, you still need to validate your input when processing). I also wanted to code to be compact and fast, and not require a bunch of ugly code injected into the web page.
I made a demo so you can see it in action.
This code uses some code from my article about date formatting and parsing via dynamic code generation, to implement a date-formatting syntax similar to PHP’s date function.
The script depends upon date-functions.js, datechooser.js, select-free.css, and datechooser.css.
How to use it
To create a date-chooser on your HTML document, follow these steps:
- Include the CSS and JavaScript files in the
headof your document. - Wrap
select-free.cssin a conditional comment for IE, as in the demo. - Create a form, a
divto hold the date chooser, a form field to hold the results, and an image to trigger showing and hiding the chooser, as below.
Here’s some sample code:
<input id="dob" name="dob" size="10" maxlength="10" type="text"/><img src="/files/calendar.gif" onclick="showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'Y-m-d', false);"/> <div id="chooserSpan" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> </div>
This code causes the date chooser to be shown with a date range of 1950 to 2010, with the date formatted in ISO-8601 date format.
Updates
On May 26 2006, I decided I could no longer procrastinate and integrated many of the helpful suggestions from the comments into the code. Thanks to all who wrote in comments suggesting improvements, and a big thanks to Jared for integrating a bunch of code for me and sending me a comment about it. Changes include a fix for the IE problem of select fields showing through, no conflicts with the Prototype library, and a cleaner show/hide behavior.
Great JavaScript!
Worked perfectly right off the bat! You’re right – it was SO hard to find something useful and elegant until I saw yours.
Thanks again!
Geoff Whittington
6 Nov 05 at 10:24 pm
Thanks for a great DateChooser, I use it and modified it for my own needs. As I often need to choose months nearby, I added some buttons to step to the previous / next month. If someone wants to try it, here is what you need:
Change row number 178 in
datechooser.jsfrom:var formHtml = " // Creates the extra HTML for monthStepper. DateChooser.prototype.createMonthStepperHtml = function() { var result = " " + "' onclick="" + "if(document.forms[0]." + this._prefix + "month.selectedIndex != 11){" + "document.forms[0]."+ this._prefix + "month.selectedIndex++;" + "dateChooserDateChange(this.form, '"+ this._prefix + "');" + "}else{" + "document.forms[0]." + this._prefix + "year.selectedIndex++;" + "document.forms[0]." + this._prefix + "month.selectedIndex = 0;" + "dateChooserDateChange(this.form, '"+ this._prefix + "');" + "}">" return result; }[ED: It looks like some of the code might have gotten zapped by the comment form. I gotta fix that so people can submit comments with code in them. I think the idea comes through though. Thanks air!
air
5 Jan 06 at 7:29 am
Here is the code correcting the previous post. I suppose it can be written more ‘elegant’. Though it works :)
DateChooser.prototype.createChooserHtml = function() { var formHtml = "" + "\r\n " +"<a><<" +""; for (var mon in Date.monthNames) { formHtml += "\r\n " + Date.monthNames[mon] + ""; } formHtml += "\r\n \r\n "; for (var i = this._start; i " + i + ""; } formHtml += "\r\n \r\n" +"<a>>></a>\r\n"; formHtml += this.createCalendarHtml(); if (this._isTimeChooser) { formHtml += this.createTimeChooserHtml(); } return formHtml; }Enjoy!
Anonymous
26 Jan 06 at 6:17 am
Thanks for sharing this great little tool with us.
Mike
13 Apr 06 at 12:37 am
SELECT CAUSES PROBLEM IN IE (FIX?)
Note that I really needed to use this for an internal intranet site but the necessary iframe code was, of course, missing.
Using some code from http://www.hedgerwow.com/360/bugs/css-select-free.html I altered the second to last line of datechooser.js:
Note you will need (1) to add the class ‘select-free’ to the dateChooser div and (2) add the following css style definition for the iframe to fix the select options from bleeding through:
.select-free { position:absolute; z-index:10; cursor:hand; overflow:hidden;/*must have*/ width:33em;/*must have for any value*/; } .select-free iframe { display:none;/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/ position:absolute;/*must have*/ top:0;/*must have*/ left:0;/*must have*/ z-index:-1;/*must have*/ filter:mask();/*must have*/ width:3000px;/*must have for any big value*/ height:3000px/*must have for any big value*/; }Thank you so much, your open source code is clean and brief. I hope this small contribution can serve as my portion of payment for your work!
Jay
Jay Johnston
1 May 06 at 1:35 pm
Excellent little script. I love the variety of ways that the date text is returned as well.. THANK YOU!!!!
Kim
16 May 06 at 8:41 pm
This is a great script. Thanks for posting it!
Ben
21 May 06 at 11:08 am
I noticed that the onChange event was not being fired by this script when the date was changed. As I had other JS code watching for when the date value changed, I inserted this single line:
I put it immediately after the input value changes, so lines 61-63 of function dateChooserSetDate() in datechooser.js look like this:
Hope that helps someone.
Jared
26 May 06 at 4:45 pm
Excellent work! Thank you very much. Rarely do scripts work “out of the box” for both IE and FF. Kudos to you my friend.
-nX
NixerX
5 Jun 06 at 4:12 pm
Any chance you could LGPL this? It’s a nice piece of work, but I can’t use it with the GPL license.
Sam
16 Jun 06 at 11:11 am
Sam, that’s a great suggestion. I have always GPL’ed everything I’ve let other people have, without much further thought, but now that I’m writing re-usable components and libraries that’s not the best idea. I will re-license this and all the other scripts I’ve released, and announce it when I’m done. Subscribe via feed or email to be notified when I do that (should be this weekend).
Xaprb
16 Jun 06 at 12:46 pm
The code to position the div does not seem to work correctly if used with fieldsets.
vericgar
17 Jun 06 at 10:31 pm
I use it with fieldsets all the time, so there must be something else that’s conflicting as well. Perhaps the combination of fieldsets and something else? If you can take a page that has a problem, and trim everything out until you have as small a test case as possible that demonstrates the problem, I’d appreciate it. You can email me directly at .
Xaprb
18 Jun 06 at 10:11 am
Great script! I love it!
Has anyone, or does anyone know if, I can modify this so only weekdays are selectable? I’m sure it’s easy. But I can’t find it for the life of me. Thanks in advance!
Sean
Sean
19 Jun 06 at 6:42 pm
Awesome… I only know one other guy who did this. How do you guys do it! Amazing!
Deepak
21 Jun 06 at 10:23 am
Hello, nice calendar:) I seem to have a problem when placing them side by side. The calendar shows too far the right.
francis
12 Jul 06 at 5:12 pm
I’m glad that you make this script as it is very useful. However, I find some problems. The code
Must be enclosed inside a form, or else it does not refresh the calendar when the pulldown menu is changed. And I discovered another interesting bug (which almost made me kill myself :P). Consider the following code:
Notice that the form tag is inside the table tag.This works just fine with IE. However, if you’re using Opera / Firefox, the calendar doesn’t refresh when the pulldown menu is changed. Interestingly, if the form tag is moved outside the table tag it’ll work just fine. I cannot fix them as I am not really that familiar with JavaScript and I don’t have the time to learn at the moment. I would really appreciate if you can mail me the solution to fix these problems.
Cheers,
Vince
Vince
15 Jul 06 at 2:04 pm
I’ve encapsulated your date chooser into an ASP .NET 2.0 User Control if you are interested. Your javascript provided the foundation for one of the best Date Choosers I’ve seen to date, so I just wanted to make it available for any .Netters who may want such a capable control. Please email me if you would like me to email you the source for your posting.
Zach
18 Jul 06 at 5:51 pm
Vince, sorry the blog software deleted your code segments :-( However, I have these comments in reply: a form control must always be enclosed inside a FORM element according to the HTML 4 spec, and placing the form directly inside a TABLE element is also invalid HTML 4. These may help you solve your problems. Also, it may help to use a validator — the Web Developer extension for Firefox has one, and there is also a HTML Tidy extension that may be more convenient; and Opera has a right-click option (or used to) to validate the page too. Browsers are beginning to be pickier about valid HTML, which I think is great.
I hope that helps!
Xaprb
19 Jul 06 at 9:32 pm
Hi Francis, it sounds like you may be having a problem with floating elements stacking next to each other. Can you make a test case and post it somewhere, then post another comment with a link to it?
Xaprb
19 Jul 06 at 9:34 pm
Fix for the positioning problem reported by vericgar:
DateChooser.prototype.show = function() { // calculate the position before making it visible var inputPos = getAbsolutePosition(this._input); // JV 20060724 Fix where _div was not positioned correctly when rendered inside another absolutely positioned div this._div.style.top = (inputPos[0] + this._input.offsetHeight - parseInt(this._div.offsetParent.style.top)) + "px"; this._div.style.left = (inputPos[1] + this._input.offsetWidth - parseInt(this._div.offsetParent.style.left)) + "px";I found that when you use the datechooser within another absolutely positioned div, the code
has the _div actually display itself at X + the parent div’s left. This resolved the problem for me.
joucek
24 Jul 06 at 10:07 am
Hmm, it still seems as if I am having a problem getting the “selection field” to show up in IE still.
I think I tried to follow the instructions, but I’m having trouble getting it to work.
I’m new to CSS and JS so this is a little difficult for me.
Thank you.
Austin
2 Aug 06 at 6:31 pm
Positioning problem afterburner:
On my previous post, I provided code that seemed to solve the positioning problem for the date-time chooser popup. However, when testing in other context and with other browser, this code failed. Now I’ve solved it in another way by changing the
getAbsolutePositionfunction as follows :// Gets the absolute position on the page of the element passed in function getAbsolutePosition(obj) { var result = [0, 0]; // JV 15082006 : stop at first absolutely positioned element while ((obj != null)&&(obj.style.position != 'absolute')) { result[0] += obj.offsetTop; result[1] += obj.offsetLeft; obj = obj.offsetParent; }This now seems to do the job for me – at least, the popup now show up where you expect it independent of the page structures I’ve tested and identically between IE and FF.
joucek
15 Aug 06 at 8:20 am
Zach, if Xaprb isn’t interested, I certainly am. Let me know if the offer is still available. It’ll keep me from reinventing several wheels. My email is [deleted].
Kaa
26 Sep 06 at 4:44 pm
Kaa, Zach never followed through, sorry. I was very interested and offered to bundle it all together, and we had some emails about it. I’ll ping him back again and see if he’s still willing to put it together.
Xaprb
26 Sep 06 at 4:51 pm
Excellent.
Tim
4 Oct 06 at 3:51 pm
Hi,
This is very good control.
How do I show date control as is? Without a need of clicking on image icon.
Thanks
bhadresh
8 Oct 06 at 2:54 pm
Can it be used in Inline calendar mode? The calendar is displayed on the page as part of its design. The example illustrates it use as a popup. It needs click on image.
bhadresh
23 Oct 06 at 10:19 pm
You could with some modification. I have neglected this script for quite a while, but you can look for me to put more time into it in the next couple of articles. There are several problems — it is not independent of other elements on the page, its CSS isn’t well-separated from other elements, it assumes you’ll want a pop-up, it makes global JavaScript variables and functions, etc etc. I am going to put some time into that and remedy it, if for no other reason than we need it at work and it’s not working well because of CSS conflicts.
Xaprb
23 Oct 06 at 10:32 pm
Many thanks for a very functional script.
Regards
Ugo
Ugo
24 Oct 06 at 7:56 pm
great job. i’m gonna use it.
martinlubpl
27 Oct 06 at 11:38 am
Great script. However, perhaps you should consider making it completely unobtrusive. The span container needed could be written in by the dom, as could the image – and then you could hook the script up on a input-field with a class=”date-field”, and the title attribute could contain the format for the response from the calender.
Lars Olesen
7 Nov 06 at 5:49 pm
Yep, I’ve been meaning to do that. That, and move everything into a Xaprb namespace to avoid conflicts with other scripts. I’ve learned a lot since I banged this out a few years ago.
Xaprb
8 Nov 06 at 9:10 am
Very nice! This is something I needed yet did not know how to create from scratch.
Would it be very difficult to put a little “x” in the top right corner so that the user could close the calendar (say if they are just looking at it or otherwise don’t click on a date)?
Michael
28 Nov 06 at 11:23 am
Not too hard I think, but I’m still struggling to get time to rewrite this. Right now I’m in the middle of a rewrite of innotop, which I consider more important.
Xaprb
28 Nov 06 at 1:53 pm
Hi-
first off- brilliant calendar script! really has helped me a lot. I have a question tho- i’ve put the script alteration in above that’s supposed to fix the positioning problem but it doesn’t seem to work.
I have 2 layers going on (including the datechooser) and it seems to take the positioning from the containing layer even if I put another layer in between. Consequently, the chooser opens up miles away from the image.
I don’t know enough about JavaScript to know where the problem is- could anyone help out?
rowan
10 Jan 07 at 7:37 am
Great script buddy I’ve looked everywhere but I couldnt get anything close to what you’ve done, congrats. I tried modifying the demo above to suit my use which is pretty much similar to what is done in the demo. However I wasnt successful so I tried the exact script as that for the demo and it didnt work. The image click is not triggering the pop-up response. Can you please advise me on how i can work around this. Thank you
wizzie
10 Jan 07 at 11:00 am
I’m sorry, I simply don’t have time to work on this at the moment, and probably won’t for months… I hope someone else can jump in and make some improvements to this script, including fixing some CSS and positioning bugs (or at least advising people how to solve it themselves in some common situations), making more options for how to show and hide the chooser, and using unobtrusive Javascript.
Xaprb
10 Jan 07 at 11:06 am
Thank you for this wonderful script!
I found that the following 2 enhancements to the showChooser() script have made this a little easier. If the date chooser is showing, clicking in the document outside of the chooser, or on a subsequent chooser icon should cause the chooser to hide. This script causes this behavior. see comments below…
function showChooser(obj, inputId, divId, start, end, format, isTimeChooser) { if (document.getElementById) { var input = document.getElementById(inputId); var div = document.getElementById(divId); if (input !== undefined && div !== undefined) { if (input.DateChooser === undefined) { input.DateChooser = new DateChooser(input, div, start, end, format, isTimeChooser); } input.DateChooser.setDate(Date.parseDate(input.value, format)); if (input.DateChooser.isVisible()) { input.DateChooser.hide(); } else { input.DateChooser.show(); } input.focus();// add this line input.onblur=function(){this.DateChooser.hide();} // and this line too } } }Tom Nazelli
12 Feb 07 at 7:07 pm
This script is awesome, thank you. Just to let you know the iframe tag datechooser.js causes a security warning if used on an https domain. I attempted to get around this by setting up a dummy src for the iframe, but it did not work so I just dropped support for IE 6.5. Let me know if you have any solution for this, I played around with it for awhile and couldn’t come up with anything
Tom Gallagher
7 Mar 07 at 5:08 pm
I know I saw a couple post asking about this…didn’t see a response. I too noticed the bug with using the drop downs to change the month and year. Apparently IE dies if you add the form tag in there….and all the other GOOD browser need it to work. so here is what I did to fix it.
Here is the link for the browser detect if anyone needs it.
http://www.quirksmode.org/js/detect.html
Hope this helps.
DateChooser.prototype.createChooserHtml = function() { var browserName = BrowserDetect.browser; var formHtml = ""; if(browserName != "Explorer") formHtml += "<form id='dateChooserForm'>"; formHtml += "<input type=\"hidden\" name=\"" + this._prefix + "inputId\" value=\"" + this._input.getAttribute('id') + "\">" formHtml += "\r\n <select name=\"" + this._prefix + "month\" onChange=\"dateChooserDateChange(this.form, '" + this._prefix + "');\">"; for (var mon in Date.monthNames) { // Patch: 2007-03-29, Need to test mon to be an integer since monthNames contain added functions from the prototype.js script var mon_int = parseInt(mon); if(mon_int == mon-0) { formHtml += "\r\n <option value=\"" + mon + "\"" + (mon == this._date.getMonth() ? " selected=\"1\"" : "") + ">" + Date.monthNames[mon] + "</option>"; } } formHtml += "\r\n </select>\r\n"; //var formHtml += "\r\n <select name=\"" + this._prefix // + "month\" onChange=\"dateChooserDateChange(this.form, '" // + this._prefix + "');\">"; //for (var mon in Date.monthNames) { // formHtml += "\r\n <option value=\"" + mon + "\"" // + (mon == this._date.getMonth() ? " selected=\"1\"" : "") // + ">" + Date.monthNames[mon] + "</option>"; //} //formHtml += "\r\n </select>\r\n"; formHtml += "<select name=\"" + this._prefix + "year\" onChange=\"dateChooserDateChange(this.form, '" + this._prefix + "');\">"; for (var i = this._start; i <= this._end; ++i) { formHtml += "\r\n <option value=\"" + i + "\"" + (i == this._date.getFullYear() ? " selected=\"1\"" : "") + ">" + i + "</option>"; } formHtml += "\r\n </select>"; formHtml += this.createCalendarHtml(); if (this._isTimeChooser) { formHtml += this.createTimeChooserHtml(); } if(browserName != "Explorer") formHtml += "</form>"; return formHtml; }BigG010
4 May 07 at 7:11 pm
Your script is fantastic. I’m in Brazil. Thanks!
reche
12 Jun 07 at 2:02 pm
Hi guys,
Not sure if this is possible to fix, but I have hit upon a problem using this script. I have the demo code placed within a div that has this CSS tag assigned to it:
#main-copy {
color: black;
background-color: white;
margin: auto;
padding: 0.5mm 5mm 5mm 5mm;
min-height: 479px;
border: 1px solid #000;
width: 200px;
}
* html #main-copy {
height: 479px;
position: relative;
left: -3px;
}
Firefox and IE7 display the popup exactly underneath the small calendar.gif whereas in IE6, the popup jumps along way to the right and below it! The only thing that seems to stop this behaviour is removing the position: relative, and left: -3px styles, but i would ideally like to keep these. Is there an easy way around this? Many thanks,
Dan
Danje
13 Jun 07 at 4:26 am
Thank you so much, that code very useful and easy to use
george
16 Aug 07 at 1:04 am
What if the user has an arbitrary amount of date fields that they wish to enable this date chooser behavior. And given that they have no way to implement explicit IDs for each date field. Due to the nature of passing HTML with embedded onclick events this prevents any kind of DOM oriented implementations. I was really hoping to get away with passing the showChooser method actual elements instead of just their IDs and have it run that way. but the method createCalendarHtml completely fubars that approach.
Matt Foster
7 Sep 07 at 1:01 pm
I totally hear you. I’d write it differently now if I were to do it over again. If you fix this issue, please send your changes to me.
Xaprb
7 Sep 07 at 10:25 pm
This script is fantastic. Congratulations!!
– always looking for simple code –
Antonio
5 Oct 07 at 5:04 am
excellent.
avarus
19 Oct 07 at 12:55 pm
It seems that in the demo the nice mouse-over “navy” background in FF is not seen in IE. I have created a workaround for this:
1) Added a fake link in datechooser.js (line 258 or so):
result = “\r\n ” “ ” i ” ” “”;
2) Added following css code in datechooser.css:
a.test123 {
.color:black;
.text-decoration:none;
}
a.test123:hover {
.background:navy;
}
Hope this helps someone who had struggles like me with IE.
-Jonathan
Jonathan
16 Nov 07 at 6:26 pm
I was trying to add a bug fix but it seems not taking it.
If I make a link out of “i” in line 260 of datechooser.js, I am able to add a css class to datechooser.css file. Then I will be able to see the nice mouse-over background in IE just as in FF.
Jonathan
16 Nov 07 at 6:35 pm
Thanks for this tool, it was very helpful!
Arun
13 Mar 08 at 6:15 pm
I wish to use the \DateChooser with the calender and time choice. However, I do not want the time to be the current time, though the date is ok shown as hte current date in case no date is supplied. However, I do nto want time ot be chosen as the current time.
I cannot get it to work around.
The idea being the user may choose only date or both date and time. The default time is not appropriate for this.
Can anyone give any ideas?
Charu Ab
18 Apr 08 at 11:37 am
hm hm, it looks nice, but it won’t let me register onchange attribute, so I cannot fire events when user changes date on form… thing with input.onchange(); won’t work to me
asabo
10 Jun 08 at 3:38 am
When i enter the changes that Tom Nazelli suggested in his reply from Feb 12th, 2007 at 7:07 pm, the window does hide…. but value of the picked date is lost…there is no change…
What am i doing wrong?
Erwin
15 Jul 08 at 12:11 pm
You’re script is great. It’s so easy to use!!! One question though. How do I change so my week starts with monday, not with Sunday???
Help…
bubi
17 Sep 08 at 2:40 pm
This project’s new home page is at http://code.google.com/p/flexible-js-formatting/
Xaprb
2 Oct 08 at 10:25 am
[...] so I figured I would try to find something that used that. After searching a bit I found a post from Xarb about a javascript calendar he created with [...]
The calendar that prototype built « SpicyCode
21 Oct 08 at 5:46 pm
Thank you so much Tom Nazelli for posting the code on how to hide the date chooser. The author should update his JS files because this hiding feature is imported IMO.
Sean
18 Dec 08 at 9:45 am
Nevermind, Tom Nazelli’s example does hide the calendar but it does not let you pick a date. Tested it in IE 7 and FF 3. Does anyone else have a code that will hide it if someone clicks out?
Sean
18 Dec 08 at 10:24 am
I just installed the script and I am surprised it does not accept to pick the date (ie when I click on the image, the calendar opens but no way to pick the date, clicking leads to nothing!!).
Am I missing something basic here?
Jalal
11 Mar 09 at 5:37 am
hello I love the script however I am having the same issue as Danje (13 Jun 07 at 4:26 am)
My div is inside a TABLE and it shows perfectly no issue with the calendar itself but the frame is not moving at all no matter what position I delimit in the css files.
ins short I want it to appear RIGHT next to the calendar button….
thanks
webomatic
31 Mar 09 at 4:10 am
I’m getting an odd error. The day changes but the month and year always default back to the current.
Byron
7 Jul 09 at 11:49 am
Getting an ‘object required’ error when trying to change month or year. Have tracked down the error to this line of code:
var input = document.getElementById(theForm.elements[prefix + 'inputId'].value);
Any ideas?
Thanks.
Glynn
24 Jul 09 at 12:31 pm
bonjour,
moi je viens de trouver ce scripte super sympa. Mais j’ai je problème sous firefox le calendrier ne se réactualise pas si la balise from est dans le tableau lors ce que je change les mois ou année par contre ça fonctionne avec la balise from hors de tableau. Si quel qu’un a la solution merci de me la donner.
swrjm
26 Sep 09 at 3:33 pm
Thank you Xaprb, this script very professional.
Atasözleri
23 Dec 09 at 9:21 am
Reply to bubi
—
You’re script is great. It’s so easy to use!!! One question though. How do I change so my week starts with monday, not with Sunday???
Help…
—
Here is what you have to do:
1) Change these things in file “date-functions.js”
–
Date.formatCodeToRegex = function(character, currentGroup) {
switch (character) {
case “D”:
return {g:0,
c:null,
s:”(?:Mon|Tue|Wed|Thu|Fri|Sat|Sun)”};
case “j”:
Date.prototype.getFirstDayOfMonth = function() {
var day = (this.getDay() – (this.getDate())) % 7;
return (day < 0) ? (day + 7) : day;
}
Date.dayNames =
["Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"];
–
2) Change these things in file "datechooser.js"
–
DateChooser.prototype.createCalendarHtml = function() {
var result = "\r\n”
+ “\r\n MT”
+ “WTFSS\r\n “;
–
Good luck with it.
P.S. The script is great!
Rogier
10 May 10 at 8:28 am
Awesome!! This is the easiest and most straight forward implementation of a simple JavaScript date chooser I have tried. Everything works great!! THANK YOU!!
Oo Rick oO
9 Jun 10 at 2:04 pm
This JS was great!
Thanks so much for sharing!
However, I realized that when I run my page with this nice calender tool in the latest firefox, the month and year can’t be changed. Even if I change the month and year on the drop down menu, the date won’t change as the change with mon&year.
So, is there any ways to solve this problem for firefox?
Thanks again.
nypan
28 Sep 10 at 12:33 pm