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