How to change the pop-up position of the jQuery DatePicker control
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);
}
})
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'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.