Make jQuery datepicker to popup in different positions

Datepicker is a rich widget of jQuery library . It exposes a lot of properties and methods to make it customizable . Once, while working with it , we needed to popup the datepicker just at side of the textbox . But the default popup position is just below the text box so we had to work around to make it appear at the side..

The following code block in document.ready method demonstrates the hack:

$('#txtDateTo,#txtDateFrom').datepicker({
    changeYear: true,
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
    }
});

In the same way we can set the position of the popup where ever needed just by setting “marginTop” and “marginLeft” attributes.

Here beforeShow() is the method exposed by datepicker widget. We can get more from http://jqueryui.com/demos/datepicker/

For demo you can copy paste the folowing code in a file and save it with .html extension . Run in browser (Allow block content for IE)

    
    jQuery Datepicker Demo
    
        div.ui-datepicker   
        {
            font-size: 10px;
        }
       
    
    
    
       
        $(document).ready(function () {
            $('#txtDateFrom,#txtDateTo').datepicker({
                changeYear: true,
                beforeShow: function (textbox, instance) {   
                instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
                });
                }
            });
        });