jquery.datePicker example: simple datePicker which closes on mouse out

< date picker home

The following example displays simple use of the datePicker component. The component has been adapted to close when the user's mouse moves out of the calendar.

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()
{
	var cal;
	var $this;

	var checkForMouseout = function(event)
	{
		var el = event.target;
		
		while (true){
			if (el == cal) {
				return true;
			} else if (el == document) {
				$this.dpClose();
				return false;
			} else {
				el = $(el).parent()[0];
			}
		}
	};

	$('.date-pick')
		.datePicker()
		.bind(
			'dpDisplayed',
			function(event, datePickerDiv)
			{
				cal = datePickerDiv;
				$this = $(this);
				$(document).bind(
					'mouseover',
					checkForMouseout
				);
			}
		).bind(
			'dpClosed',
			function(event, selected)
			{
				$(document).unbind(
					'mouseover',
					checkForMouseout
				);
			}
		);

});

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