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

javascript jquery jquery-ui jquery-ui-datepicker
gfrizzle picture gfrizzle · Mar 19, 2009 · Viewed 253.1k times · Source

Any idea how to get the DatePicker to appear at the end of the associated text box instead of directly below it? What tends to happen is that the text box is towards the bottom of the page and the DatePicker shifts up to account for it and totally covers the text box. If the user wants to type the date instead of pick it, they can't. I'd rather have it appear just after the text box so it doesn't matter how it adjusts vertically.

Any idea how to control the positioning? I didn't see any settings for the widget, and I haven't had any luck tweaking the CSS settings, but I could easily be missing something.

Answer

Sean CH picture Sean CH · Jul 25, 2009

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.

Related questions

jQuery UI DatePicker to show month year only

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

Read More
How do I pre-populate a jQuery Datepicker textbox with today's date?

I have a very simple jQuery Datepicker calendar: $(document).ready(function(){ $("#date_pretty").datepicker({ }); }); and of course in the HTML... <input type="text" size="10" value="" id="date_pretty"/> Today's date is nicely highlighted for the user when they …

Read More
Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? …

Read More