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:


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

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