jquery.datePicker example: datePicker with different positioning

< date picker home

The following example demonstrates how you can alter the position that the date picker pops up relative to it's related element. Click on the following links...

#tl #tr #bl #br

You can also pass an arbitary vertical and horizontal offset which describes how far away from the default position the calendar will pop up:

#custom-offset

In addition to the $().dpSetPosition and $().dpSetOffset functions you can pass the desired values into the verticalPosition, horizontalPosition, verticalOffset and horizontalOffset attributes of the settings object passed into $().datePicker.

Page sourcecode

$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind('click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		);
	// tl is the default so don't bother setting it's position
	$('#tr').dpSetPosition($.dpConst.POS_TOP, $.dpConst.POS_RIGHT);
	$('#bl').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_LEFT);
	$('#br').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);
	$('#custom-offset').dpSetOffset(10, 300);
});