jquery.datePicker example: datePicker which appears on focus - part 2.

< date picker home

This example shows how to try and make the date picker appear on focus of it's associated text field...

This is better than part 1 because it now works in Firefox, Opera, Safari and even IE... I also added an extra select above the date pickers because it seems like Safari doesn't let you tab to links by default and this way there is something above the inputs for you to tab to...

The problem with IE seems to be that whenever a focus event is triggered it happens twice - once with the jquery passed data and then again without... Hence the need to the IE check on line 898 of the date picker which means that after selecting a date in IE the tab order is messed up...

Test date picker form

1. Test select: Test SELECT Doesn't shine through Even in IE Yay!
2. Date 1:
3. Date 2:
4. Test select: Test SELECT Doesn't shine through Even in IE Yay!

Page sourcecode

$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind(
			'focus',
			function(event, message)
			{
				if (message == $.dpConst.DP_INTERNAL_FOCUS) {
					return true;
				}
				var dp = this;
				var $dp = $(this);
				$dp.dpDisplay();
				$('*').bind(
					'focus.datePicker',
					function(event)
					{
						var $focused = $(this);
						if (!$focused.is('.dp-applied')) // don't close the focused date picker if we just opened a new one!
						{
							// if the newly focused element isn't inside the date picker and isn't the original element which triggered
							// the opening of the date picker

							if ($focused.parents('#dp-popup').length == 0 && this != dp && !($.browser.msie && this == document.body)) {
								$('*').unbind('focus.datePicker');
								$dp.dpClose();
							}
						}
					}
				);
				return false;
			}
		).bind(
			'dpClosed',
			function(event, selected)
			{
				$('*').unbind('focus.datePicker');
			}
		);
});

Page CSS

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}