Date input and calendar popup

I have created a date input and javascript calendar popup. First, I modified Simon Willison's A better way of entering dates to fix a few bugs and to allow more date output formats. If you don't have the message div, date-parse will display an alert instead of throwing an error.

I've also heavily modified Lea Smart's calendar popup so that it doesn't use document.write and adds the calendar container to the body element instead of the head element. While I was at it I cleaned up the html code that is used for the calendar.

Date input field and drop down calendar

Here's the combined sample.

If you want to change the output format of the date parser, change the global dp_dateFormat variable to:

  • dd/mmm/yyyy
  • dd-mmm-yyyy
  • dd mmm yyyy
  • d/mmm/yyyy
  • d-mmm-yyyy
  • d mmm yyyy
  • dd/mm/yyyy
  • dd-mm-yyyy
  • dd mm yyyy
  • d/mm/yyyy
  • d-mm-yyyy
  • d mm yyyy
  • mm/dd/yyyy
  • mm-dd-yyyy
  • mm dd yyyy
  • m/dd/yyyy
  • m-dd-yyyy
  • m dd yyyy
  • m/d/yyyy
  • m-d-yyyy
  • m d yyyy
  • yyyy-mm-dd

The default format is m/d/yyyy. The code has been modified to allow date entry in dmy format for formatting strings that start with a "d". You can find the source files at:

For now you'll have to look at the example pages for the syntax.

Update: fixed a few bugs.

  • Added click event to calendar container that stops the click event from bubbling.
  • Added logic to close the month and year menus.
  • Changed logic that calculates to see if the calendar will drop below the bottom of the screen.
  • Changed page onclick handler to not calculate if the user clicked the mouse on the calendar. It now closes the calendar only since the calendar traps mouse click events and stops the click event at the calendar.
  • Removed preload images since images are called from the CSS.

Update:

  • Added setDateFormat() method.
  • Syncronized calendar date format with date parser date format.

Update: 31 Mar 2006 - Fixed problem with date input if the month you were entering the had more days then the month you entered. The resulting date would be one month after the date you input. If you entered 1 Feb 2006 you would get 1 Mar 2006. It is now fixed, many thanks to ML for finding the problem.

Update: 22 Jul 2006

  • Added holiday and day of week blockout masking. See source of date-parser.htm for an example of how to use holiday and day masking.
  • Added an addEvent() call to add date parsing behavior to an input field with a class of "dateparse"
  • Added the ability to set the start date of the drop down year menu.

Update: 31 Aug 2006

  • Changed getFirstDOM function to set the day to 1 first then set the month and finally the year. This fixed a problem with the current day moving the month up to the next month and return the wrong first day of the month.

Update: 10 Sep 2006

  • Changed table footer of calendar popup to display "Today is: Month Day, Year" or "Today is: Day Month Year" depending on the date format, with the date as a link.
  • Changed title text of footer link from "Go to today's date" to "Go to current month".
  • Modified calpopup.css to set the width of the footer td so that IE would not word wrap the text.

107 Comments

Gravatar Image1. Posted at 3/18/2006 10:04:30 AM by Artur

This calendar is very nice, and very simple, but nobody notice and nobody fix situation that in example with limits of start and end dates (... 15th March 2003 and 25 April 2003 ... ) through script you must call wrong dates

... new Date(2003,2,15),new Date(2003,3,25) ...

so that are 15th February 2003 and 25 March 2003 :-))

Can you fix it ?

Gravatar Image2. Posted at 3/18/2006 4:59:28 PM by Tanny O'Haley

Hi Artur,

I've tried to make the popup as easy to use as possible. I'm glad that you found that it is simple to use. Actually the date object initialization is correct. The date object states that the month is zero based.

“The month as an integer between 0 and 11 (January to December)” - { Link }

This also applies to hours, minutes and seconds.

  • 15th January 2003 would be new Date(2003,0,15).
  • 15th February 2003 would be new Date(2003,1,15).
  • 25th March 2003 would be new Date(2003,2,25).

I know it looks wrong, but that is how it is defined.

Tanny...

Gravatar Image3. Posted at 3/24/2006 12:15:40 PM by AAMIR SYED

I have a pop up calendar in Javascript and it inputs the data to a text field.. Here I need 2 update the textbox and when the value selected (date i mean) changes I want 2 carry out some tax computations based on Date.. if FDate < XX > ToDate tax = 9% else if FDATE < XX> ToDate tax = 12% and so on.. When I select the date from the calender it updates the text box but im not able to trigger.. What 2 do. pls advice

Gravatar Image4. Posted at 3/31/2006 10:11:20 AM by ML

Try to enter a date of 9/1/2005 into your contro land tell me why it doesn't work? It gives all sorts of wrong dates dependign on what you enter. Try 2/1/2005 as well.

Gravatar Image5. Posted at 3/31/2006 7:13:05 PM by Tanny O'Haley

Hi ML,

Thank you for finding this problem. I tracked it down to that when I set a date I set the year, month, then the day. Since today is the 31st of March and you input 2/1/2005 (m/d/yyyy format). The year is set to 2005.

The month is set to February, but because the day is 31 and February does not have 31 days the date object moves the month to the next month which is March.

Finally the day is set to 1 which results in a 3/1/2005 date.

I fixed it by adding code to that after creating a date object, the day is set to 1.

It is now fixed thank you for reporting the problem.

Gravatar Image6. Posted at 3/31/2006 7:26:14 PM by Tanny O'Haley

Hi Aammir,

What trigger are you using? I would think that the onchange event would detect when the date field changes.

Tanny...

Gravatar Image7. Posted at 4/7/2006 5:04:35 AM by Nathaniel Brown

This seems to be almost an identical copy to DateBox, which uses the DynArch JSCalendar lib. For those that are interested, please visit { Link } for an alternate version.

They say immitation is the sincerest form of flattery, so thank you Tanny :)

Gravatar Image8. Posted at 4/8/2006 4:18:28 PM by Tanny O'Haley

Hi Nathaniel,

No, this is not a copy of DateBox which I found out about after I wrote this utility. It is similar in that I used Simon Willison's A better way of entering dates with a few fixes and additions and combined it with a drop down calendar. I needed a way to simulate Domino's date control and I believe that this combination does a pretty good job.

I did take a look at the DynArch calendar way back in October 2003 when Simon wrote his entry but thought that it was overly complex to setup. It came with over 80 files! Difficult but not impossible to add to a Domino database. Instead I heavily modified Lea Smart's calendar popup which is much easier to setup.

For programmers out there, use any version that you find helpful. The DynArch calendar is very configurable and works on many platforms. For my uses, I needed something that was more simple to setup. In the future, given time I may create a version where all you do is give the input field a class of "dateinput" and allow unobtrusive javascript to add the functionality. Maybe later...

Gravatar Image9. Posted at 6/15/2006 7:37:11 AM by

Hi,

I was using the original calendar for a long time. The modified one looks great. I have a simple issue, the year menu goes to the second line in the calendar where as the month menu stays in the first line. Any idea?

BM

Gravatar Image10. Posted at 6/19/2006 10:40:17 PM by Tanny O'Haley

Hi BM,

Not sure what you mean, could you send me a screen shot?

Tanny...

Gravatar Image11. Posted at 6/27/2006 12:35:01 PM by Julie Moffat

Hey, thanks for making this available. I looked and looked and this one is the easiest to set up. Our schedule manager will love the date parse capability. One thing I've noticed is that if I select a date and then focus in another text field, it changes the date to something like 6/5/2008 (from 6/29/2006). I must have the parameters not put in correctly. My input looks like:

<input type="text" name="bookDate" id="bookDate" size="11" onblur="dp_dateFormat='dd/mm/yyyy';magicDate(this)" onfocus="if (this.className != 'error') this.select()">

<a href="javascript:void(0);" onclick="g_Calendar.show(event,'bookDate', 'mm/dd/yyyy', new Date().addDays(2))"

title="Show popup calendar"><img src="Public/Templates/JavaLibrary/calendar.gif" border="0" alt=""></a>

We add two days to the date so that clients can't book a service today or the next day without calling.

Any suggestions where I need to set something different so it doesn't automatically change my date?

I haven't included my site here because I have to log in as a client to get to the book service page, so it's a bit dodgy just now to give out the site info. Sorry.

Thanks so much.

Julie

Gravatar Image12. Posted at 6/27/2006 9:04:38 PM by Tanny O'Haley

Hi Julie,

Change the code from:

<input type="text" name="bookDate" id="bookDate" size="11" onblur="dp_dateFormat='dd/mm/yyyy';magicDate(this)" onfocus="if (this.className != 'error') this.select()"> <a href="javascript:void(0);" onclick="g_Calendar.show(event,'bookDate', 'mm/dd/yyyy', new Date().addDays(2))" title="Show popup calendar"><img src="Public/Templates/JavaLibrary/calendar.gif" border="0" alt=""></a>

To:

<script type="text/javascript">

// Put this in the head section of your page.

dp_dateFormat='mm/dd/yyyy';

</script>

<input type="text" name="bookDate" id="bookDate" size="11" onblur="magicDate(this)" onfocus="if (this.className != 'error') this.select()"> <a href="javascript:void(0);" onclick="g_Calendar.show(event,'bookDate', '', new Date().addDays(2))" title="Show popup calendar"><img src="Public/Templates/JavaLibrary/calendar.gif" border="0" alt=""></a>

The problem is that the date format is set to two different formats. The popup calendar set it to mm/dd/yyyy and the onblur event to call the dateparser set it to dd/mm/yyyy. Setting the date in mm/dd/yyyy format to 06/29/2006 with the calendar, then the date parser would change the format to dd/mm/yyyy. This made it the sixth day of the 29th month in the year 2006. The addition made it 6 May 2008.

I hope this helps and thank you for your kind comments. When I get time, I'm going to add code that will automatically add the onblur event based on a class on the input field.

Gravatar Image13. Posted at 7/10/2006 1:33:12 AM by Mohamed Fawzy

Hi,

This calendar is really great, but I have an issue when using it with layers/div in jsp page. It appears behind the layers of tab control.

Can you help me with this issue?

thanks

Gravatar Image14. Posted at 7/13/2006 8:14:09 AM by Kenneth Courtney

This control looks really great, sort of like the control found on Code Project: { Link }

adapted from javascript originally written by Tan Ling Wee.

Has anybody encapsulated this control into a similar asp.net web custom control yet?

Gravatar Image15. Posted at 7/14/2006 1:56:29 PM by Tanny O'Haley

@Ken, Sorry, not yet. Anyone who wants to encapsulate this dual control into a .NET custom control is welcome to as long as you tell me so that I can point them to your code.

Gravatar Image16. Posted at 7/22/2006 12:39:02 PM by Joe

Very Elegant. :)

I want to use the calendar so somebody can enter their date of birth. For that reason, I want the "Year" drop-down to contain roughly 100 items (1906-2006).

The problem is that I don't want a 100-item menu stretching down the screen so the only solution is a scrollbar or perhaps reverting to a <select> dropdown.

Would this be simple to do?

Gravatar Image17. Posted at 7/22/2006 3:20:17 PM by Tanny O'Haley

@Joe, This is very easy. Download the latest versions of calpopup.js, dateparse.js, events.js and calpopup.css. In your call to the calendar popup, add a menu start year. If you want the end year to be the current year, use -1.

g_Calendar.show(event, 'dateField', null, null, null, 1901, -1)

If you want to limit the years use an end date. For instance to limit to years through 1999.

g_Calendar.show(event, 'dateField', null, null, new Date(2000,0,0), 1901, -1)

I thought that what you asked for would make the calendar popup better, so it has been added. The drop down year menu will automatically add a vertical scroll bar if necessary.

Gravatar Image18. Posted at 8/9/2006 6:41:29 AM by srinivas

hi

can any one pls tell me how can set the date format to be dd-mm-yyyy instead while useing show_calender in java script

my code is

HTML=HTML&" <td nowrap bgcolor=lightgrey><input name=""DelmsActualMandatory"&milestoneCodes(milestoneNumber)&""""

HTML=HTML&" class=""dateInputBox"" value="""&milestoneActuals(milestoneNumber)&"""/>"

HTML=HTML&" <a href=""javascript:show_calendar('updateData.DelmsActualMandatory"&milestoneCodes(milestoneNumber)&"');"" title=""Date Picker"">"

Gravatar Image19. Posted at 8/9/2006 11:38:52 PM by Tanny O'Haley

Hi Srinivas ,

This is very easy. In the head section of your page you can put.

<script type="text/javascript">
dp_dateFormat='dd-mm-yyyy';
</script>

Or you can pass the format in the third parameter of the show() method.

onclick="g_Calendar.show(event, 'ex6', 'dd-mm-yyyy')"

My preference is to set it in the script element in the head section of your page so that it will be available to the date parser routine.

You can also find some instructions at: Date Input and Calendar Popup Instructions.

Gravatar Image20. Posted at 8/31/2006 11:02:03 AM by Bernard Durango

Hi I found bugs on your code, on the function getFirstDOM(). This happens when your computer date is 31 of the month.

1. Set the computer date to ex: August 31, 2006.

2. Run this calendar.

3. Pick any from the choices: Feb, April, June, Sept, Nov.

4. You will notice that the month you picked does not start on the exact day of the week.

5. This is because the setMonth() function will automatically set to next month, because the date does not have a Feb 31, or April 31, June 31, Sept 31 and Nov. 31.

Solution:

On the getFirstDOM() function you must call first the setDate() before the setMonth.

Gravatar Image21. Posted at 8/31/2006 4:32:29 PM by Tanny O'Haley

Hi Bernard,

Thank you so much for the bug report and finding where the error was located. I have modified the code to set the day to 1 first.

thedate.setDate(1);
thedate.setMonth(this.month);
thedate.setFullYear(this.year);

I had changed this code in the dateparse.js file but missed it in the calpopup.js file.

Gravatar Image22. Posted at 9/9/2006 5:28:43 PM by Alex

Tanny, this thing is amazing! Thank you!

I think I've found a little usability bug though. When I click on the calendar button and then the "Today" link the current day isn't selected and put in the text box. Instead the "Today" link just selects the current month. If you want to change the text from "Today" to "This Month" it might make sense, but as it is currently it seems a bit unintuitive.

Again, thank you for updating Simon's work and really my complaint isn't a huge problem, I just figured I'd ask if it was possible to fix. :-)

Gravatar Image23. Posted at 9/10/2006 12:58:04 PM by Tanny O'Haley

Alex,

Good point. I've changed the code to display "Today is: today's date" and the title text of the link from "Go to today's date" to "Go to current month". To get the latest changes, please download calpopup.css and calpopup.js

The footer link still might not be intuitive as it could be but the text is consistent with other calendars that I've seen. If you would like to change the text, it is on line 344 of calpopup.js.

Gravatar Image24. Posted at 10/31/2006 10:38:32 AM by victor

I have two calender popup(begin date and end date) in my page. When user selects begin date , it is showing current date. it's fine. But when user selects end date popup it should display current date + 3o days that means it should display next month when user clicks callender popup. Anybody can help on this?

Gravatar Image25. Posted at 11/8/2006 8:02:26 AM by John

Would it be too much trouble for you to put all the related files into a ZIP file for more convenient download?

Gravatar Image26. Posted at 12/15/2006 10:35:54 AM by Veign

Another small issue is when you display say the past 50 years the drop down is covered by the scroll bars. Would it be possible to either: 1) Allow a person to type in a year or 2) Widen the drop down.

Thanx

Gravatar Image27. Posted at 12/15/2006 11:19:49 AM by Tanny O'Haley

Hi Veign,

I have not been able to repoduce your problem, however I did notice the size of the dropdown doesn't leave much room when there is a scrollbar. Just go into the calpopup.css file and modify the #cp_years rule and increase the width.

Gravatar Image28. Posted at 12/21/2006 3:06:46 PM by Gabe

I am trying to combine your calendar with GreyBox so that when someone selects a date, it displays an HTML Page in the GreyBox popup. I have disabled the clickDay function and modified the day link to point to a page with a GET variable called showDate. Everything works fine except the GreyBox formatting. Clicking on a day just functions as a normal link. Do you know of anything that I need to do to be able to apply the GreyBox formatting? Any help would be appreciated.

Thanks

Gravatar Image29. Posted at 1/4/2007 8:56:11 PM by meisong

how about if i want making dropdown list using popup calender, i mind when i click a day in popup calender then that dropdown list automaticly can be showing , tanks u

Gravatar Image30. Posted at 1/5/2007 1:16:40 PM by Jon Koerber

Love the script! My goal is to find the most calendar features in the smallest footprint (code filesize).

I've implemented the calpopup successfully, but I really only want the pop-up selector and not the date format parsing. Can I just bypass the dateparse.js (and I assume events.js) and just use the pop-up selector? In my test, my head has:

<link rel="stylesheet" type="text/css" href="../includes/calpopup.css">

<script src="../includes/campopup.js" type="text/javascript">

</script>

<!-- DONT NEED THESE?

<script type="text/javascript" src="dateparse.js"></script>

<script type="text/javascript" src="events.js"></script>

-->

<script language="javascript" type="text/javascript">

dp_dateFormat = "yyyy-mm-dd"; /* Set default format to Canada */

</script>

This actually works fine except for one JS error thrown in the console of Error: magicDate is not defined

Source File: { Link } Line: 519

Is there a way for me to avoid this error, easily disable the date formatting, or should I just delete the call to that function in calpopup.js on line 519. I'm not 100% sure of how this all works together so thought I would ask if there was an easy way to use just the selection functions.

Gravatar Image31. Posted at 2/9/2007 2:23:02 AM by Ron

I certainly appreciate the work Tanny has done on this tool and its date parsing functionality. However I did want to expound on the point made in message #8 of this thread.

While the Dynarch calendar { Link } does contain over 80 files, I'd suggest examining it more closely as an option. After reviewing for about 30 minutes, I realized almost every Dynarch file is an example, template, or sample for language/styling options.

Once I stripped out the extras, the number of files necessary for Dynarch is *exactly* the same as this tool ... 1 CSS file and 3 JS files.

I did run into a few problems with Tanny's tool that required me to make modifications to the javascript ... and was still having problems getting it to display with a z-index high enough to put it above nested DIVs, especially in IE.

The Dynarch tool was very easy to implement, worked on my website immediately, and had a lot of built-in functions and parameters that were neatly referenced in their documentation.

Each product offers slightly different functionality, so take time to look at both calendars and determine which one works best for you. Thanks.

Gravatar Image32. Posted at 2/14/2007 10:20:57 PM by KiranR

Hi Tanny ,

Thankyou for your great work !!

Can anybody suggest what to do if i want to display the pop-up calendar when the text field get focused (and also by clicking on image,it's already there).What changes i have to do?

Thanks.

Gravatar Image33. Posted at 2/16/2007 4:53:02 PM by Tanny O'Haley

KiranR,

Copy the onclick event to an onfocus event on the input element.

<input onfocus="g_Calendar.show(event, this.id)" ...

I haven't tried it, but it should work.

Gravatar Image34. Posted at 2/21/2007 7:19:52 AM by Pramod

Really this topic help me a lot.

Gravatar Image35. Posted at 3/2/2007 11:48:09 PM by KiranR

Any of you accessing this calendar from JSP ?.In my JSP, instead of giving popup, it is diaplaying calendar at the top of the page.Could any of you suggest something about this problem..

Gravatar Image36. Posted at 3/3/2007 10:10:45 AM by Tanny O'Haley

Kiran,

The calendar has been used on plain HTML, PHP, ASP, JSP and Domino pages without trouble. Make sure that you have included events.js, calpopup.js, dateparse.js and calpopup.css in the resulting HTML page. Make sure that all paths to the files are correct and that the graphic files are in a path that the CSS will see.

Do you have an URL of a sample page?

Gravatar Image37. Posted at 3/4/2007 5:44:16 AM by KiranR

hi Tanny,

Thank you for your suggestion,i missed to set the paths in calpop.css file.But now it is showing a transparent calendar in my web page and i.e also below the other contents of the page.Am sending a screenshot to your mail.

We don't have URL at this time.

Thanks.

Gravatar Image38. Posted at 3/16/2007 6:40:41 AM by premkumar

hi everybody,

i got the error message. g_Calendar() is undefined.

date-parser/js file is not available/

still i am in problem. Anyone help me.

Thanks in advance.

Gravatar Image39. Posted at 3/16/2007 5:55:30 PM by Tanny O'Haley

Hi premkumar,

Could you please provide an url?

Gravatar Image40. Posted at 3/19/2007 6:03:33 AM by Xavigo

I've setup your calendar, very nice and it's working OK but Mozilla javascript console keeps telling me that "Magicdate is not defined"

My call:

a href="javascript:void(0);" onclick="g_Calendar.show(event, 'start','yyyy-mm-dd')" title="Show popup calendar">

I see magicdate it's a function in dateparse but what it does?

Gravatar Image41. Posted at 4/10/2007 5:51:25 AM by Rajasekhar Naidu

i have to dispaly calendar in my jsp page. pls let me know the code

Gravatar Image43. Posted at 4/17/2007 10:47:06 AM by Patti

I've set up your calendar and it works great in every browser except Safari. The calendar shows up but there is no functionality. Is this a known issue and is there a fix? Thanks!

Gravatar Image44. Posted at 4/17/2007 5:25:34 PM by Tanny O'Haley

Hi Patti,

This is a known issue with Safari. I'm not sure why I can't click on any of the links. I did spend a little time on it last year, but didn't find a solution. I have plans to totally rewrite the calendar and date parser as soon as I get time.

Gravatar Image45. Posted at 5/27/2007 8:52:55 AM by Rashmi

Hi Tanny,

I am new to JSP and Java.Presently i am doing a project and i need to display Calendar in it . I tried to your calendar but i am getting error that g_Calendar is not defined.I will paste my code here:

I included these in head

<head>

<link rel="StyleSheet" type="text/css" href="{ Link } media="screen" >

<%-- <link type="text/css" href="calpopup.css" media="screen" rel="stylesheet"> --%>

<script type="text/javascript"script src="events.js"></script>

<script type="text/javascript"script src="calpopup.js"></script>

<script type="text/javascript"script src="dateparse.js"></script>

<script type="text/javascript">

g_Calendar.setDateFormat('dd-mm-yyyy');

</script>

then in body i used the code as:

<table width="100%" border="0" cellspacing="1" cellpadding="1" bgcolor="#444444" align="center">

<tr>

<td width="100px" align="right" class="txtFieldLable">Application Date :

<td width="100px" align="left" height="33" class="freeformfielddata">

<input type="text" id="dateField" class="dateparse" name="appdt" size="15" maxlength="20" value="<%=appdt%>">

<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>

i added .js files in src folder and all jpg and html in webinf folder.

Gravatar Image46. Posted at 5/27/2007 8:58:20 AM by Rashmi

I was searching for calander since a long time,and i am very pleased to see your calander,please help me to use it in proper way.I am very thankful to you.

Thanks in advance.

Gravatar Image47. Posted at 5/27/2007 2:09:09 PM by Rashmi

I have corrected the path of all three js files but now i am facing same problem as Kiran getting the transparent calander with lots of different displays as well on the top of the page.

Please help me.

Gravatar Image48. Posted at 5/27/2007 2:09:11 PM by Rashmi

I have corrected the path of all three js files but now i am facing same problem as Kiran getting the transparent calander with lots of different displays as well on the top of the page.

Please help me.

Gravatar Image49. Posted at 5/27/2007 2:10:38 PM by Rashmi

code is same as above i just changed the paths for all the three .js files.

Gravatar Image50. Posted at 5/29/2007 9:22:12 AM by Tanny O'Haley

Rashmi,

Please provide an url to your page. That is the only way I can determine what is wrong.

Gravatar Image51. Posted at 6/27/2007 8:14:35 AM by corabeus

hello, this is a great program. i managed to get it to work, but i can't find from where to change the names of the months (from english to another language); i changed some constants in calpopup.js and dateparse.js but with no effect...thank you

Gravatar Image52. Posted at 6/27/2007 11:51:26 AM by Tanny O'Haley

Hi Corabeus,

This is combination and a modification of two different person's work. You will have to change this in two places. In the calpoup.js file you can overwrite using the following lines:

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

And in the dateparse.js file overwrite the global variables:

monthNames = "January February March April May June July August September October November December".split(" ");
weekdayNames = "Sunday Monday Tuesday Wednesday Thursday Friday Saturday".split(" ");

Someday I will modify this so that it is one class in one file. Until then, this is the way it works.

Gravatar Image53. Posted at 6/28/2007 10:53:41 PM by corabeus

thank you very much for the answer. My mistake was that i didn't changed both the files at the same time. Another question is if it's difficult to change the calendar so that the first day of the week would be Monday and not Sunday (i mean if a newbie like me, with your advices could get it done).

Gravatar Image54. Posted at 7/1/2007 10:28:51 PM by corabeus

i found the g_startDay variable...problem solved

thank you again

Gravatar Image55. Posted at 7/25/2007 6:33:54 AM by pothuraju

i want to goto back words also plzzzzzzzz help me

Gravatar Image56. Posted at 7/25/2007 9:04:48 PM by pothuraju

Hi,

I want to go previous years also. Help me plzzzzzzzzzzzzzz

Gravatar Image57. Posted at 7/25/2007 10:37:19 PM by swaraj

I want to select previous years and dates also, where i ve to change in code please help. its urgent

Gravatar Image58. Posted at 7/26/2007 9:38:30 AM by Tanny O'Haley

@pothuraju and @swaraj,

Just click the year on the calendar and a dropdown will appear with the current year, the previous three years and the next three years. You can also click the arrows to the left and right of the year. If you want to display more years in the dropdown, please look at comment 17.

Gravatar Image60. Posted at 9/13/2007 12:35:13 AM by Corabeus

Hi again,

I have a small problem. I want the user not to be able to change the date by typing in the --input type="text" field--, just using the calendar button. How could i do that? (disabled and readonly properties for that field didn't do the trick)

Thank you

Gravatar Image61. Posted at 1/23/2008 10:54:20 PM by vani

how to display the calender using drop down in javascript

Gravatar Image62. Posted at 1/28/2008 10:12:33 AM by Dave K

When using the dateparse.js I get an error message when I enter a bad date as it should. However, after the alert to displayed, the form filed submits the information for inserting. My thought is that the error alert should stop the page until the error is fixed.

I am really new at this, so I could not figure out a solution.

Can you help

Gravatar Image63. Posted at 1/28/2008 3:34:53 PM by Tanny O'Haley

Hi Dave,

This is one of the problems with using onblur for data validation but it is pretty easy to fix. Add an onsubmit function to your form. It would look something like:

<form onsubmit="return validate()" ...>

If the field name is "date" and there is only one form the page, in your validate() function add:

var f = document.forms[0];

if(!magicDate(f.date)){ return false; }

Returning false to the onsubmit event will stop the submit.

Gravatar Image64. Posted at 2/12/2008 12:26:02 AM by kumaravel

It was nice . I want to change the text box value once the user selects month or year combo values.I don't want the user to select again the date if they don't want to change the date . This is very urgent .. please help me for this problem....

Gravatar Image65. Posted at 4/11/2008 7:08:36 AM by abhisek

hi.

actully i created two textbox . and i am entering the date in them through calender.but i want that the date of second text box should be greater then or equal to first textbox's date

Gravatar Image66. Posted at 4/22/2008 12:34:52 AM by naim

Hi!

What can be don to disable the dates previous to today? User can't be able to select any old date than today? help me...

Thanks............

Naim

Gravatar Image67. Posted at 4/22/2008 4:15:57 PM by Tanny O'Haley

Hi Naim,

This is quite simple and there is an example in the calpopup.htm demo page.

If the field name is ext, set the dateFrom parameter to today's date.

onclick="g_Calendar.show(event,'ex2', null, new Date())"

Now the user will not be able to select a date less than today's date from the drop down calendar. When you submit the form you will have to check the date for an invalid date, since they can still type in any date. In your onsubmit function add:

var f = document.forms[0];

if(!magicDate(f.ext) && (new Date(f.ext))<=(new Date()) {
   // Display error.
   return false;
}

You can also use the dateTo parameter to prevent users from selecting a future date.

onclick="g_Calendar.show(event,'ex2', null, null, new Date())"

Gravatar Image68. Posted at 5/27/2008 1:42:02 AM by Kyle

Hi there. Trying to use two calendars in one form. What I would like to do is if the person selects for instance the date 5/29/08 in calendar one then I want calendar2 to start at 5/29/08 and show only 14 days more. How can I do this? I've been trying everything. THANKS AWESOME CODE.

Gravatar Image69. Posted at 5/28/2008 5:45:55 PM by Kyle

Tanny,

Any help on this? I do appreciate it. Just want to know if this can even be implemented this way?

Thanks in advance.

Gravatar Image70. Posted at 5/28/2008 7:34:51 PM by Tanny O'Haley

Hi Kyle,

In your onclick event that displays the calendar for the second date, call a function that retrieves the value of the previous date field, then sets the parameters in the call to g_calendar.show() to use calculated dates. I think the parameters are pretty much self explanatory.

g_calendar.show(e, targetID, dateFormat, dateFrom, dateTo, menuYearFrom, menuYearTo)

Given that the ID of your first date field is startdate and the second field's ID is enddate. The click event for enddate's calendar would call a function that first sets a date variable to the date of startdate and then calls the show method with the startdate as parameters.

var d = new Date(document.getElementById("startdate").value);

g_Calendar.show(event, 'enddate', null, d, d.addDays(14));

This doesn't prevent a user from entering a date in the date field that is not valid for your application or selecting the enddate first, then the startdate. You will still have to check the dates in your onsubmit handler to make sure that the date ranges are valid.

Gravatar Image71. Posted at 5/28/2008 10:02:28 PM by Kyle

Tanny

Thank you for the info. I'm new to Javascript to should I add the:

var d = new Date(document.getElementById("startdate").value);

to the javascript file or just add a:

<script language="javascript>

var d = new Date(document.getElementById("startdate").value); </script>

above the input field? Also for some reason it shows 15 days instead of 14 days on the second calendar once I added your addon script you just gave me. But like I said want to make sure I incorporated it correctly.

And last whats the easiest way to make sure the user has selected a date in the second calendar that is greater than the first calendar? Javascript, php whats your opinion?

MANNY THANKS.

Gravatar Image72. Posted at 5/29/2008 6:12:56 PM by Tanny O'Haley

Hi Kyle,

Change 14 to 13 in the addDays parameter. Put the script in the <head> element and create a function.

<script type="text/javascript">
function setEndDate() {
   var d = new Date(document.getElementById("startdate").value);
   g_Calendar.show(event, 'enddate', null, d, d.addDays(13));
}
</script>

Or better yet, put it in a script file.

Then in enddate's click event, onclick="setEndDate()". That will set the date and open the calendar.

You might want to check out ppk on JavaScript and DOM Scripting: Web Design with JavaScript and the Document Object Model.

As for checking the dates, it depends on your audience. If you know that javascript will always be enabled, like a corporate internet, use javascript. Otherwise, I suggest that you use javascript on the front end and whatever language you're using on the back end too.

Gravatar Image73. Posted at 6/9/2008 10:43:00 PM by sahil

Program to input a date in the dd/mm/yyyy format. Add some days to the entered date and display the new date.

Gravatar Image74. Posted at 6/9/2008 10:46:13 PM by sahil

Program to input a date in the dd/mm/yyyy format. Add some days to the entered date and display the new date.

Gravatar Image75. Posted at 8/6/2008 4:36:49 AM by shiju nair

I am facing a problem with the start date and the end date.I have to do a validation such that the end date entered with the date picker should be equal to or greater than the start date.I have written the following code but it is not helping me out.Here is the code of javascript

<script language="javascript">

function validate()

{

if(document.tstest.timestamp1.value < document.tstest.timestamp.value)

{

alert('Please check the End date');

return false;

}

if(document.tstest.timestamp.value.length==0 && document.tstest.timestamp1.value.length==0)

{

alert("Please enter the date");

return false;

}

return true;

}

</script>]<script language="javascript">

The html code is as follows.

start date

<input readonly type="Text" id="start" name="timestamp" size = "20" value="">

End date

<input readonly type="Text" id="end" name="timestamp1" size = "20" value="">

The problem is that the validation is done only for days but not for the month and year.If you enter the start date as dd/mm/yyyy 12/8/2008 and End date as 11/8/2008 it will give an alert box but if you enter start date as 12/8/2008 and end date as 09/8/2008 than the form is submitted it is not validating. Please anyone can find a solution for this. thanks in advance

Gravatar Image76. Posted at 9/9/2008 2:25:12 PM by Sahand

Thank you for the superb calendar.

I wanted to display the pop-up calendar when the text field get focused, so I searched the comments and found you had advised to:

Posted at 2/16/2007 4:53:02 PM by Tanny O'Haley

Copy the onclick event to an onfocus event on the input element.

<input onfocus="g_Calendar.show(event, this.id)"

I tried this but the calendar only flashes on the screen and disappears again. How can I fix this?

Note, everything functions fine when I use the link to pop up the calendar.

Thank you for your help!

Gravatar Image77. Posted at 9/15/2008 12:04:17 AM by Saurabh

Hello Tanny,

great work!!!! i m using ur calendar in almost every project of mine.. it is working gr8!!!! thanks...

i thing i want to ask....

i need a calendar popup that opens from lik 1 jan 1985....my problem is whnever i open cal popup it starts from current date and to select the required year user has to select it from list.....

but i want to popup the calendar from the 1st month of the year that user enters......

is it possible ???? waiting for reply

Gravatar Image78. Posted at 9/15/2008 4:02:45 PM by Tanny O'Haley

shiju nair,

Before checking dates you must first convert the value of the text field to a date object. Then you can compare dates.

Tanny O'Haley

Gravatar Image79. Posted at 9/15/2008 4:09:10 PM by Tanny O'Haley

Hi Sahand,

The popup is not really designed to operate that way. It is designed to close the popup if the mouse is not on the calendar.

Tanny O'Haley

Gravatar Image80. Posted at 9/15/2008 4:17:19 PM by Tanny O'Haley

Hi Saurabh,

Set the value of the date field to Jan 1, 1985. The popup calendar will open to the date in the input field.

Tanny O'Haley

Gravatar Image81. Posted at 9/15/2008 11:33:24 PM by Saurabh

thnx for the solution............

Gravatar Image82. Posted at 9/23/2008 5:08:39 AM by sumna

hi Tanny,I liked ur Calender very much,but i am facing two problems,

1)In IE it is working but at the bottom of the page it is showing like date isundefined

2)In Firefox,while clicking the button ,it is showing an error like date is undefined like a alert msg,it is not wroking

Gravatar Image83. Posted at 10/23/2008 4:41:33 AM by Emre

Hello,

l am developing an ERP system so l have to use an popup calender and most of scripts are not useable and some of them does not work on the explorer they can show differences browser to browsers so l saw your calender and it is wonderful l think so l just want to say thank you because of sharing what a wonderful source, thank you...

Gravatar Image84. Posted at 1/23/2009 4:21:44 AM by mallika

Hi,

This is very nice calender.

But i have requirement to select the dates not only by mouse but also with keyboard arrow keys to navigate through the dates and enter key to select the date.

could u please resolve this.

THANKU

Gravatar Image85. Posted at 1/23/2009 12:37:42 PM by Tanny O'Haley

I did not add keyboard navigation to the calendar since the user can type in the date. I plan on rewriting the calendar popup code in the far future and will add keyboard navigation to the popup calendar then. In the mean time if you need to provide keyboard functionality, I suggest that you try out the dynarch DHTML Calendar.

I would have also replied to you in an email but you did not provide a valid email address.

Gravatar Image86. Posted at 1/30/2009 8:37:45 AM by mallika

Hi,

This is nice calendar.Thank you for your advice.But i am not getting focus to next element in the html page when i press tab,after selecting date.

the focus is again going to first field.Could u please resolve this.

Gravatar Image87. Posted at 1/30/2009 12:27:10 PM by Tanny O'Haley

Hi Mallika,

Could you give me a link to the page where you're having a problem?

Gravatar Image88. Posted at 3/19/2009 5:49:34 AM by deleted

Nice post!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 sub folders.Thanks for the update!!

Administrator: This comment is strictly here to provide a link which has been deleted because the link violates the comment guidelines. The person did not want help, they provided a fake email address and a link to a gambling site. I provide this blog and code examples for use without charge, please do not abuse my generosity.

Gravatar Image89. Posted at 3/20/2009 12:23:00 PM by Tanny O'Haley

As with any request for help when something goes awry, I can't help you without actually looking at your page. Please provide an URL and I will be more than glad to help.

Gravatar Image90. Posted at 4/23/2009 9:18:28 AM by K20

Thanks a lot, I use your module in my website ;)

Gravatar Image91. Posted at 4/27/2009 6:02:48 AM by the_lxs

Thank you Tanny,

this calendar is awesome !

Gravatar Image92. Posted at 6/11/2009 12:56:05 PM by Tom Johnson

I just wanted to day thank you for a great date picker. I had the choice to go with others but I chose yours because it its very lightweight and looks and works great! The other implementations found are too bloated in my opinion.

Thanks again!

Gravatar Image93. Posted at 6/20/2009 5:33:11 AM by Patrick

Thank you for this awesome little script!

I did have an issue that I fixed. Originally the calendar popup did not want to show at all. I had to switch the head information around from:

<type="text/javascript" script src="blah.js">

to:

<script src="blah.js" type="text/javascript">

but it started working after that. Figured I'd share in case anyone else had the same issue.

I do have another issue that I haven't been able to figure out. It was posted before but no resolution was shown. When the calendar pops up, I am not able to change the month or year. When you click it, it closes the calendar popup. I provided a link in the website field if that helps (you will have to act like you're submitting a website to get to the second page where the calendar is).

Gravatar Image94. Posted at 7/16/2009 1:16:26 PM by ram

Hello Tanny,

that's a great piece of work and I really appreciate you for the help. I have a requirement in displaying the calendar directly on the page, I mean it should n't be a popup calendar, it should be an inline calendar, can you help me regarding this. thanks in advance.

Gravatar Image95. Posted at 9/21/2009 12:41:32 AM by selva

Hi,

How can i disable pastdays and sundays

Gravatar Image96. Posted at 9/21/2009 2:53:52 AM by selva

Hi,

How can i disable sundays or holidays..

Can anybody help me

Advance Thanks!!!

Gravatar Image97. Posted at 10/19/2009 12:54:00 AM by Seb33300

Hello,

In dateparse.js line 307, you should replace the block with :

tmpStr += '<thead><tr><td colspan="7"><ul>\n'+

'<li id="cp_prevMonth"><a href="javascript:g_Calendar.changeMonth(-1)" title="Go to previous month"><span><</span></a></li>\n'+

'<li id="cp_monthMenu"><a href="javascript:g_Calendar.openMenuMonths()" title="Open months menu">' + this.months[this.month] + '</a>\n' +

'<ul id="cp_months">';

for(var m = 0; m < 12; m++){

tmpStr += '<li><a href="javascript:g_Calendar.clickMonth(' + m + ')">' + this.months[m] + '</a></li>';

}

tmpStr += '</ul></li>\n' +

'<li id="cp_nextMonth"><a href="javascript:g_Calendar.changeMonth(1)" title="Go to next month"><span>></span></a></li>\n' +

'<li id="cp_prevYear"><a href="javascript:g_Calendar.changeYear(-1)" title="Go to previous year"><span><</span></a></li>\n' +

'<li id="cp_yearMenu"><a href="javascript:g_Calendar.openMenuYears();" title="Open years menu">' + this.year + '</a>\n';

It's easer to make your script i18n using the month table.

Gravatar Image98. Posted at 10/19/2009 12:57:33 AM by Seb33300

Note:

if you want to modify your script to make it i18n, here are the frenc values :

this.daysOfWeek = "Dim Lun Mar Mer Jeu Ven Sam".split(" ");

this.months = "Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre".split(" ");

Gravatar Image99. Posted at 10/26/2009 8:19:53 AM by huiku

Hi,

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 Image100. Posted at 10/26/2009 8:24:42 AM by huiku

In my previous message the link I wanted is :

.....10302009.h t m l

sorry...again !

Gravatar Image101. Posted at 10/29/2009 4:31:03 PM by Doug

Hi, nice popup calendar. All the others i tried were a pain, this worked right away. I do have a question about which script (and variabe) returns the value to the input box. I have begin time and end time input boxes and wanted to add 00:00 to begin and 23:59 to end so I would not have to create another set of input boxes fo begin time and end time. Thanks again for nice work and site.

Doug

Gravatar Image102. Posted at 10/30/2009 1:08:35 PM by Doug

No bother, I traced through it myself and found it. Thanks

Gravatar Image103. Posted at 12/10/2009 9:51:20 AM by Ray

Good Morning,

I have implemnted this on a site, works great (almost). Very nice work. I am running IE8 and I run with JS Errors trapped. I am getting an error on Line 17, char 9 and line 66, char 17 (both are the i in if). I am not much of a JS programmer but get by... however, I cannot figure this one out at all... any ideas?

Ray

Gravatar Image104. Posted at 12/10/2009 9:52:20 AM by Ray

Wow, what an idiot... Ok, the script with the errors is events.js. Sorry

Ray

Gravatar Image105. Posted at 12/10/2009 9:56:41 AM by Ray

OK, on eother little thing... the header in the pop up calendar wraps to a second line. On the screen, next to each other, yours and mine are the same size. There appears to be more spaces on each side of the month and each side of the year on mine. I can live with it but it looks a little hooky... I am sure it is something I did, just not sre what... it does this in IE8 and Firefox (latest), same browsers show your just fine.

Ray

Gravatar Image106. Posted at 12/10/2009 11:19:11 AM by Ray

Ok, Removed date-parser.js (don't need holidays anyway) and it all works fine. EXCEPT that the header line still wraps ' < month > < ' on on the first line and ' year > ' is on the second. Anoying but I will live with it unless you know what is causing it.

Ray

Gravatar Image107. Posted at 12/10/2009 2:32:32 PM by Ray

Updated the .css file to make the line NOT wrap... so, all done, working as expected. Thanks.

Ray

Add a comment

Discussion for this entry is now closed.