How to change the pop-up position of the jQuery DatePicker control

Here's what I'm using:

$('input.date').datepicker({    beforeShow: function(input, inst) {        inst.dpDiv.css({            marginTop: -input.offsetHeight + 'px',             marginLeft: input.offsetWidth + 'px'        });    }});

You may also want to add a bit more to the left margin so it's not right up against the input field.

I do it directly in the CSS:

.ui-datepicker {   margin-left: 100px;  z-index: 1000;}

My date input fields are all 100px wide. I also added the z-index so the calendar also appears above AJAX popups.

I don't modify the jquery-ui CSS file; I overload the class in my main CSS file, so I can change the theme or update the widget without having to re-enter my specific mods.

Here is my variation of Datepicker calendar aligning.

I think that it's pretty nice, because you can control positioning via jQuery UI Position util.

One restriction: jquery.ui.position.js required.

Code:

$('input[name=date]').datepicker({    beforeShow: function(input, inst) {        // Handle calendar position before showing it.        // It's not supported by Datepicker itself (for now) so we need to use its internal variables.        var calendar = inst.dpDiv;        // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20)        setTimeout(function() {            calendar.position({                my: 'right top',                at: 'right bottom',                collision: 'none',                of: input            });        }, 1);    }})