Date Input and Calendar Popup Instructions

As promised in my Date input and calendar popup article, here are instructions.

In the head section of your page add the following lines.

<link type="text/css" href="calpopup.css" media="screen" rel="stylesheet">
<type="text/javascript"script src="events.js"></script>
<type="text/javascript"script src="calpopup.js"></script>
<type="text/javascript"script src="dateparse.js"></script>
<script type="text/javascript">
// Optionally change the date format.
//	g_Calendar.setDateFormat('dd-mm-yyyy');
</script>

Because of a Safari bug with onclick events in elements that are created using createElement and insertBefore DOM methods, if you want this to work in Safari, add the following div right after the body tag. It does not affect other browsers to add this here, it just means that you have to add HTML to your page that should be created with javascript.

<body>
<div id="calcontainer"></div>

Add an input field to your form with a class of "dateparse".

<input type="text" size="10" id="dateField" class="dateparse">

Add a button or an image with an onclick event to access the calendar popup.

<a href="javascript:void(0);" 
	onclick="g_Calendar.show(event, 'dateField')" 
	title="Show popup calendar">
	<img src="calendar.gif" 
		class="cp_img" 
		alt="Open popup calendar">
</a>

The only required items for the show method are event and the id of the date input field.

Date input field and drop down calendar

Here's the sample date parser and calendar popup.

Update: 3 May 2006 Forgot to check for mdyyyy when parsing a date from an input field. Fixed now.

Update: 22 Jul 2006 Added ability to set the drop down year menu to any start at any year.

Update: 3 Aug 2006 Added instructions on how to make click events work in Safari.

60 Comments

Gravatar Image1. Posted at 5/18/2006 2:01:34 PM by Ben dunlap

If I put the date input/calendar popup inside of an iframe the calendar goes above the text field, not below. Do you know what this would be happening?

Gravatar Image2. Posted at 5/18/2006 2:20:27 PM by Tanny O'Haley

Ben,

The iframe defines a browser window and the calendar popup will not go past the end of the window. The code looks to see if the calendar can fit in the window and if it will go past the end of the window, it drops up instead of dropping down. If you want the calendar to always drop down, make sure that the window the page is in is tall enough to contain the calendar.

Gravatar Image3. Posted at 5/19/2006 9:31:26 AM by Ben Dunlap

Tanny,

Thanks for the explanation. I was dynamically changing the height of the iframe so that it would only display the form details that I specified. But in doing so it didn't leave enough room for the calendar. I ended up just adding some more space to the iframe and now everything works beautifully. Thanks alot for your help, its greatly appreciated.

Gravatar Image4. Posted at 8/3/2006 6:10:14 AM by woow

Hi Tanny,

Is it possible to get the time incoperated in the calander? I have been trying this and failed.

Thanks

Gravatar Image5. Posted at 8/3/2006 9:31:35 AM by Tanny O'Haley

Try using a separate field for time. Or you can use the Dynarch calendar which can include time. Go to the Dynarch Calendar page and click "Popup" just under the "What is it?" heading. You will see a calendar with time. I found it a little complicated to setup and wanted something that didn't include over 80 files so I modified Lea Smart's calendar and added Simon Willison's date parser to meet my needs.

Gravatar Image6. Posted at 8/31/2006 1:57:50 PM by JW

We are using your calender and it has been working very well. Today (August 31 2006) we entered choose the calender to enter a date in Sept. and it is showing Sept 1st 2006 as being on a Sunday? Any ideas?

Gravatar Image7. Posted at 8/31/2006 4:41:13 PM by Tanny O'Haley

Hi JW,

The error was in the getFirstDom() function. Bernard Durango found this error and the function that caused the error. It has been fixed, please download the latest code. I had previously fixed this error in dateparse.js but missed it in calpopup.js.

Thank you,

Tanny O'Haley

Gravatar Image8. Posted at 10/8/2006 5:08:44 PM by Ross Garner

when I click on the day in the calendar, I want the calendar control to disappear

Currently i have to click somewhere else on the page to make the calendar dissapear

pls advise how to do this

Gravatar Image9. Posted at 10/9/2006 9:54:03 AM by Tanny O'Haley

Ross,

Could you please give me more information? What browser, operating system are you using. Does this happen on the sample that I provided. I would like to replicate the problem you are having, but I have not been able to replicate the behavior.

Thank you.

Gravatar Image11. Posted at 12/29/2006 9:17:03 AM by Susie

For some reason mine won't let me change the month or year. It works fine on your examples but not when I added it to my page. Any clue what I might have done wrong? I didn't make any changes to anything besides changing paths of the images and script files to find them in my subfolders.

Thanks,

Susie

Gravatar Image12. Posted at 12/29/2006 4:56:02 PM by Tanny O'Haley

Hi Susie,

Do you have a link to the page where the calendar isn't working?

Thank you

Gravatar Image13. Posted at 1/21/2007 4:47:20 AM by Claudio

I live in Italy, your DatePicker use localization for days and month naming's ?

Thank you for your effort, it's is very good and simple.

Bye

Claudio

Gravatar Image14. Posted at 1/21/2007 2:33:04 PM by Tanny O'Haley

Hi Claudio,

There is no internationalization of month or day text. You can modify the text on lines 59 and 60 of the calpopup.js file.

this.daysOfWeek = "Sun Mon Tue Wed Thu Fri Sat".split(" ");
this.months = "January February March April May June July August September October November December".split(" ");

Tanny O'Haley

Gravatar Image15. Posted at 2/2/2007 9:53:42 AM by Ron

I've been trying to add the calendar to our website with limited success. Hoping you'll be able to offer some guidance.

I have two test pages for you to review:

{ Link } (has calcontainer div)

{ Link } (does not have calcontainer div)

The first link includes the calcontainer div you mentioned for Safari. When I attempt to run this in IE 7 or FF 2.0.0.1, I can select a date but I'm unable to go to another month or year, and cannot select today's date.

The second link does not include the div. Because of the nested div's on our pages, the only way I was able to make this work in Firefox was to change/add z-index's to the javascript file. The iframe had been -1 and I changed it to 5, and the table within the iframe I set to 6. Works well in FF, but does not work at all in IE 7.

Take a look at both pages in both browsers so you can see the results. Advice?

Gravatar Image16. Posted at 2/2/2007 9:58:00 AM by Ron

Sorry, one other comment that I forgot to mention. I had added the functionality to be able to see the dateFieldMsg to the pages, but I'm only able to get it to change on a very basic page.

Does the ID of the input field need to be dateField for this functionality to work? Hoping this is not the case since we need to have two calendar selections on one page; one for a start date and one for an end date. Thanks.

Gravatar Image17. Posted at 3/4/2007 12:51:06 PM by Simon

Very nice calendar. Any chance it could be modified so it repositions itself when the textbox and button are right justified? At present, it disappears off the page and the user has to scroll across to see the whole calendar.

This functionality would be useful when using the calendar in a table of results.

Gravatar Image18. Posted at 3/4/2007 8:28:55 PM by Tanny O'Haley

Hi Simon,

The cp_location variable defines the location of the calendar. If cp_location is set to 1, then the calendar will go below or above if there isn't enough room at the bottom of the page, the input element. If it is set to anything else, the calendar will be positioned to the right of the button.

As I see it, your input element is right justified and the calendar is wider than the combined width of the input element and calendar button which causes the calendar to position itself so that part of it is off the right of the page. When this happens the user has to use the horizontal scroll bar to scroll to the right to see the whole calendar.

I see where the code needs to go. The following line needs to use an if to make sure that the calendar does not position part of itself off the page like it does for vertical positioning.

this.containerLayer.style.left = x + "px";

I modified the code so that if the calendar is positioned past the right side of the browser window it will position the right side of the calendar even with the right side of the input element. Could you please test the changes to make sure that it works for you?

If anyone else wants to test this new code too, you can find it at calpopup.js

Gravatar Image19. Posted at 4/5/2007 1:26:30 PM by Meg

This is such a wonderful calendar. I was wondering about one thing though: whenever I insert an invalid date, such as 2/31/2007, the calendar automatically ajusts itself (in this case to 3/3/2007). Although this is nice, I would like instead to send the user an error message. In which part of the code is the calendar instructed to increment the invalid date a total of x days past the last correct date?

Gravatar Image20. Posted at 4/10/2007 10:48:37 AM by Tanny O'Haley

Hi Meg,

This is part of the date object. If I give it days greater then the number in the month it will give me the date that the number of days represent. This is not something I can change without a lot more code which I don't really have time to do right now. This feature of the date object can be handy if I want to put in a date two weeks from today and it's near the end of the month. Let's say it's 4/24/2007 and I want two weeks from that date. I can type in 4/38/2007 and it will give me the correct date of 5/8/2007.

Gravatar Image21. Posted at 4/18/2007 11:23:12 PM by sheetal

Hi Tanny,

thanks for a wonderful and easy-to-use calendar. i am facing the same problem mentioned by susie, ie, "For some reason mine won't let me change the month or year. It works fine on your examples but not when I added it to my page. Any clue what I might have done wrong? I didn't make any changes to anything besides changing paths of the images and script files to find them in my subfolders". i can select any date from the current month, but i cannot change the month or year. unfortunately, i cannot give you the link to my site. if you could please provide any clues or suggestions for the same, i'll be really grateful.

thanks in advance..

Gravatar Image22. Posted at 4/22/2007 10:33:12 PM by sheetal

Hi Tanny,

one more thing i observed, the arrows for next/prev month/year are visible only on mouseover in my installation of the calendar. hope this helps u to identify the problem?

thanks again..

Gravatar Image23. Posted at 5/2/2007 6:43:05 AM by Trevor Ellis

I found that the Month and Year picker did not work with IE6 or FF1.5 when the <div id='calcontainer'> </div> was present - the calendar simply disappeared.

I changed the calpopup.js to always set the attributes even i fthe div already existed (i.e I moved the end brace) - This works great!

// if calendar popup container does not exist...

if(!this.containerLayer) {

this.containerLayer = document.createE...

this.containerLayer.id = 'calcontainer';

document.body.insertBefore(this.conta...

}

this.containerLayer.onmouseou...

this.containerLayer.onmouseo....

this.containerLayer.onclick=this.handleClick;

Gravatar Image24. Posted at 5/27/2007 6:16:09 AM by Rashmi

Hi Tanny,

I was striggling to get calander popup on my JSP since a long time,Your code looks wonderful,I added the codes as per the instruction but it is giving me error that g_Calander is not defined and calendar popup is not coming at all.

I am very new to Java and JSPs please if you can help me on this.

Gravatar Image25. Posted at 5/27/2007 6:20:44 AM by Rashmi

I am also not able to understand the meaning of <a href="Javascript:void(0);".....>

Gravatar Image26. Posted at 7/25/2007 3:42:43 AM by pothuraju

Where are the .JS files

Gravatar Image28. Posted at 8/17/2007 3:59:41 PM by Nathan

Hey Tanny,

Love the calendar! Thanks so much for the work you put into it. I was using it on a site but it will work in every browser except for IE7. It allows me to properly select a date in any month but it does not all me to run my PHP script when I hit the submit button. IE7 It says there is an error on the page in the bottom left status area and gives me this in the details info:

"Line: 517

Char:3

Error:'magicDate' is undefined

Code: 0

URL: { Link }

Is there any way that it would conflict with the way IE7 runs PHP scripts? Any advice? I took it down for the moment from the listed URL above in order to not confuse visitors. Thanks in advance.

Gravatar Image29. Posted at 8/19/2007 8:10:25 PM by Tanny O'Haley

The error Nathan received was because dateparse.js was not included on the page. It has been fixed and is working.

Gravatar Image30. Posted at 9/17/2007 8:52:32 PM by David Blanchet

Almost two years later and this timeless piece is still relevant. You designed this with an ease of use and through all the bug smashing i see here have come up with something that is very intuitive and useful. Thanks, got me out of a crunch!

Send me a paypal email, it'll treat you to lunch.

Gravatar Image31. Posted at 11/2/2007 11:29:42 AM by Joe Williams

Hey Tanny,

I'm having a little trouble getting the script to work. It appears on the page and I'm not getting any JavaScript errors. But when you click the little calendar pick, nothing happens. It doesn't open the div the way it should. Any suggestions would be greatly appreciated!

www.purepointgolf.com/store/search/advanced/

I'm running Vista & IE7.

Thanks!

Joe

Gravatar Image32. Posted at 11/2/2007 1:49:22 PM by Joe Williams

Nevermind. I fixed it. Thank you!

Gravatar Image33. Posted at 11/27/2007 2:38:14 PM by Bill Streckfus

Hi Tanny,

First off, thanks for this great little utility, it's one of the best looking and most useful of those out there. I hate to only come to post this message because of troubles I'm having, but I cannot for the life of me get the arrow icons or less than greater than symbols to appear.

This basically applies to the cp_prevMonth, cp_nextMonth, etc. id's. I can change the background color of these small elements in calpopup.css, but cannot get a background image (arrow) to show. I'm certain the image URL is right as well.

If anyone has any suggestions I'd be very thankful.

Gravatar Image34. Posted at 11/27/2007 6:19:12 PM by Tanny O'Haley

Hi Bill,

This is most likely a path issue. The distributed CSS is set to use images in the same directory as the CSS. If you have the images in another directory you will need to change the path in the CSS file.

Gravatar Image35. Posted at 11/29/2007 5:40:37 AM by Pat Moore

Tanny,

Great utility. I am, however, having a similar problem. The month and the year forward and back images don't appear until they have been hovered over. Any ideas?

Gravatar Image36. Posted at 12/12/2007 8:20:10 AM by Tony

Hi,

When I use IE7, the dates are incorrect because some of the values spread into an 8th column.

This has been mentioned before but I couldn't find a resolution.

Any ideas?

Gravatar Image37. Posted at 3/11/2008 5:07:03 AM by Malcom

I have been trying to get this to work in my PHP application but everytime I load it I get a javascript error saying

Line 94

char 1

'g_calendar' is undefined

what am I missing?

Gravatar Image38. Posted at 3/12/2008 10:30:31 AM by Lisa

Malcom, I had the same issue. I got it working though. For all the "includes" of the javascript files, be sure to use the following format:

<SCRIPT LANGUAGE="JavaScript" SRC="events.js" TYPE="text/javascript">

Do this for events.js, calpopup.js, and dateparse.js in <HEAD> section Don't forget to copy the "include" for the css file as well, which is in the same format as it is above this page.

Gravatar Image39. Posted at 4/10/2008 8:13:16 AM by Chris

I am using this jQuery script ({ Link } ) to provide a Hint to a calendar input. Since the Hint places a value in the textbox its causing issue with the display of the calendar. Is there a way I can prevent it from acting on the Hint?

Gravatar Image40. Posted at 4/10/2008 4:09:48 PM by Tanny O'Haley

Hi Chris,

The reason you're having this problem is because the dateparse routine runs on blur which is also when the hint plugin replaces the blank input field with the title of the input field. The title of the input field is not a valid date, so dateparse returns an error. To fix this we'll have to check the input field's value against the title and return if they are equal.

  • Edit the dateparse.js file.
  • Find the magicDate function.
  • Add the following code at the top of the magicDate function.

    if(input.value == input.title) {
    return true;
    }

This should fix it and as long as the title doesn't have the date delimiter in it you'll be fine, otherwise you will have to modify the if statement on line 216 of calpopup.js to add && !(tmp.value == tmp.title).

You will still have to validate the input field's value before submitting the form and add special code to blank out the date field if the value is equal to the title.

Gravatar Image41. Posted at 4/10/2008 4:22:42 PM by Chris

I did something very similar after poking around the calendar.js code. What I did was change line 216 to:

if (tmp && tmp.value && tmp.value.split(this.dateDelim).length==3 && tmp.value!=tmp.getAttribute("title")){

Gravatar Image42. Posted at 5/16/2008 12:49:26 AM by Colm Fitzgerald

Hi great app. Thanks for sharing it.

I have started to use it myself. Although I'm having a little problem with it in IE7.

It works ok as an example off line but when integrated into my site it doesn't. When I click on a date in the calendar popup, the calendar does not auto disappear. Then if I click out side of the calendar to make it disappear the date remains in the text box but does not update to the format I require for my mysql data base.

Any body have idea's what might cause this?

I would share the web address but its part of a private stock taking system with full access to my database. But if I have to I'm sure I could arrange a demo of my problem.

Gravatar Image43. Posted at 5/16/2008 1:20:40 AM by Colm Fitzgerald

PS it works great in other major browsers that I have tried.

Gravatar Image44. Posted at 5/16/2008 3:33:14 AM by Colm Fitzgerald

Ok very very sorry, events.js was not included.

Everything works ok.

THANK YOU VERY MUCH FOR SHARING YOUR WORK WITH US.

Gravatar Image45. Posted at 5/20/2008 1:18:52 PM by lam

Hi Tan

i want, When I click on a date in the calendar popup then text in textbox submit to server( reload page).

Gravatar Image46. Posted at 6/2/2008 1:50:26 AM by Froilan

Hi Tanny,

I have one question to you, hope you help me . Here is my question, when i select the date in calendar popup, i want to set back the focus on the input field (beside the calendar popup), so that when i press tab key, it will continue in the next input field. Can you give me a sample code to do this.. Thanks a lot in advance..hope to hear from you soon..

Best Regards,

Froilan

Gravatar Image47. Posted at 6/2/2008 9:33:08 PM by Tanny O'Haley

Hi Froilan,

When you close the dropdown calendar, focus goes back to the field. To make it so that tab bypasses the button, set the tabindex="-1" on the button's anchor/link element.

Gravatar Image48. Posted at 6/3/2008 7:12:00 PM by Froilan

Hi Tanny,

Good Morning!

Thanks for the reply.

May I request a sample code snippet's of that?

For example:

I have a input field and a popup button beside it. There's Ok and Cancel button in Popup.

I've select a value from the popup. When I click Ok or Cancel button in popup, the focus should get back in the input field. How could I do this? Please help me out of this.

Thanks a lot.

Regards,

Froilan

Gravatar Image49. Posted at 6/13/2008 4:22:19 AM by tango

When i click on caalendar it displayed halfly and goes behind control that are below calendar when using IE7

But its working very fine with IE6

can anybody help me for this problem

Gravatar Image50. Posted at 8/21/2008 11:15:45 AM by robust

Hello Tanny,

First of all thanks for your calender which I successfully integrated on my JSP page. One probelm I have is I want to convert the date selected by the user to a standard YYYY-MM-DD format. If I know what I am going to get from the user I can do it. But if this calnder is supporting different formats ( i mean for different countrys) , then How can I do my formatting? Please help me on this. I am struck on this.

Thanks

robust

Gravatar Image51. Posted at 8/21/2008 3:14:48 PM by Tanny O'Haley

Hi Robust,

In the head section of your web page add the following.

<script type="text/javascript">
g_Calendar.setDateFormat('yyyy-mm-dd');
</script>

Regards,

Tanny

Gravatar Image52. Posted at 9/10/2008 9:10:59 AM by robust

Hello Tanny,

Is there a way to show the "today's" date in the textbox of the calendar by default. I mean, if the user entered on the page where the calendar is located, I want to show the todays date as default in the text box.

Please help me on this.

Thanks

robust

Gravatar Image53. Posted at 9/15/2008 4:41:04 PM by Tanny O'Haley

Hi Robust,

You can use any of the following methods to show todays date in an input field.

  1. Set it on your web server so that the input field's value is set to today's date.

    <input id="datefield" name="datefield" value="9/15/2008">

  2. Set the input field's value to today and call magicDate.

    <input id="datefield" name="datefield" value="today">

    In your onload or DOMContent loaded function call:

    magicDate(getDocumentById("datefield"));

  3. If you can't set the field on your server, in your onload or DOMContent loaded function call:

    var el = getDocumentById("datefield");
    el.value = "today";
    magicDate(getDocumentById("datefield"));

Tanny O'Haley

Gravatar Image54. Posted at 12/19/2008 1:14:59 AM by Joel

Thank you, Thank you, Thank you. Now that was nice and easy and easy to find and implement. Great, love you to death right now. But really, that is very appreciated. It worked so well, and so easy to slide into an existing form.

Thanks

-Joel

Gravatar Image55. Posted at 1/23/2009 4:34:02 AM by mallika

could u pls resolve this problem

Gravatar Image56. Posted at 8/4/2009 5:14:13 PM by Nana Asomani-Nyarko

This is great, I implemented it with ease. I have been roaming the internet for such a script, just when i was giving up I stumble upon this. Thank you!

Gravatar Image57. Posted at 10/21/2009 2:29:49 PM by Clark

Hello Tanny,

First of all thanks for your calender which I successfully integrated on my asp page. The first problem I have is that the day shown in the textbox don't match the same one selected from the calender ( if the selected day is more than 12).

The second one is that the left/right arrow to change the month or the year don't work and once hit the calender disappear.

The last one is that the calender is positioned far from the button.

Could you please help me.

With my regards.

Gravatar Image58. Posted at 10/26/2009 8:21:34 AM by huiku

Hi,

Sorry I post 2 times...

Thank you so much for that code !

I have some special questions for you please (sorry I'm a beginner...but I try to improve...)

How is it possible :

- to make the calendar always visible (instead of the click on the "calendar.gif" button) ?

- that each time I click a day, for example I click on 10/30/2009, this load a new page (in the same window) which address will be :

{ Link }

- that in this new page, the calendar is automaticaly set on 10/30/2009 ?

I don't know if it's very clear ?

Is there a place where all files could be downloaded please ?

Is this code only work online ? I have some problems testing it on my computer (the click on next month or next year does not work...)

Sorry for all those questions...

If you can help me that will be very nice.

Thank you very much

Gravatar Image59. Posted at 10/26/2009 8:23:48 AM by huiku

In my previous message the link I wanted is :

.....10302009.h t m l

Gravatar Image60. Posted at 3/2/2010 7:36:55 AM by hen

the click on next month or next year does not work!!!!!!!

pleaaaaaaaassssssse help!

Add a comment

Discussion for this entry is now closed.