jquery.datePicker example: datePicker which appears on focus v1.

< date picker home

This example shows how to bind the focus and blur events on an element to the dpDisplay and dpClose functions to make the date picker popup when the element receives focus and disappear when the element is blurred.

Unfortunately it only works in Firefox... Continued in part 2.

Test date picker form

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

Page sourcecode

$(function()
{
	$('.date-pick')
		.datePicker()
		.bind(
			'focus',
			function()
			{
				$(this).dpDisplay();
			}
		).bind(
			'blur',
			function(event)
			{
				// works good in Firefox... But how to get it to work in IE?
				if ($.browser.mozilla) {

					var el = event.explicitOriginalTarget
					
					var cal = $('#dp-popup')[0];
				
					while (true){
						if (el == cal) {
							return false;
						} else if (el == document) {
							$(this).dpClose();
							return true;
						} else {
							el = $(el).parent()[0];
						}
					}
				}
			}
		);
});

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