The Calendar popup Goes Over Select Elements in IE

Notice in the example page for the calendar popup that when using Microsoft Internet Explorer 5.5 and above, the calendar does not go under the drop down list but goes over the drop down list.

If you look at Lea Smart's calendar popup, which is what I used as a basis for the Calendar popup, the calendar goes under the drop down list when using IE.

All you have to do to make an element go over instead of under a select element in IE is add an iframe in the containing element, absolute positioned, the same size as your element with a z-index less than your element.

Check out the code in calpopup.js to see how it works.

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.

Day of week in relation to last, this and next

When researching adding next day of week to the date parser I had trouble with the ambiguity of the word next. I consulted a friend who is a college English professor and here's the result.

last <day of week>
The closest day previous to yesterday. If today is Wednesday, last Tuesday would not be yesterday but eight days ago. Last Monday would be two days ago.
this <day of week>
The closest day following today. It could be said that this is equal to this coming. If today is Wednesday, this Tuesday would be the six days from today and this Thursday would be tomorrow.
next <day of week>
The day of the week in the week following this week, but not tomorrow. If today is Saturday, next Sunday would not be tomorrow but eight days from today. If today is Wednesday, next Thursday would not be in this week but in next week which would be eight days from today.

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.