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

gfrizzle_23935 0
Viewed 281237

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.

jquery-ui-datepicker jquery-ui jquery javascript
23 Answers

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.

Admin1

The accepted answer for this question is actually not for the jQuery UI Datepicker. To change the position of the jQuery UI Datepicker just modify .ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

user_1292540

Or you can use the focus event on your dateSelect object and position api together. You can swap top and bottom and left for right or center (or really anything you want from the position api). This way you don't need an interval or any insanely complex solution and you can configure the layout to suit your needs depending on where the input is.

dateSelect.focus(function () {
    $("#ui-datepicker-div").position({
        my: "left top",
        at: "left bottom",
        of: $(this)
    });
});
user_33621910 
$('.PDatePicker').MdPersianDateTimePicker({
                Placement: 'top',          
            });
user_13953830

Here is another solution.

  1. Create function to fix the position

     function setDatepickerPos(input, inst) {
 var rect = input.getBoundingClientRect();
 // use 'setTimeout' to prevent effect overridden by other scripts
 setTimeout(function () {
     var scrollTop = $("body").scrollTop();
     inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop });
 }, 0);}

  2. Add the function to ‘beforeShow’ properties of datepicker

     $('#MyDatepicker').datepicker({
 dateFormat: "yy-mm-dd",
 changeMonth: true,
 changeYear: true,
 defaultDate: +0,
 inline: true,
 beforeShow: function (input, inst) { setDatepickerPos(input, inst) },});

Here is the reference link: link. All the credits should go to Aries.me

user_44177870

If your datepicker in the drag panel and panel has scrool. You must datepicker position calculate all scrool positon changes with interval.

$(function () {
    var datePickerInterval;

    $("#id").datepicker({
        beforeShow: function (input, inst) {
            var calendar = inst.dpDiv;
            datePickerInterval = setInterval(function () {
                calendar.position({
                    my: 'right top',
                    at: 'right bottom',
                    collision: 'none',
                    of: input
                });
            }, 10);
        },
        onClose: function () {
            clearInterval(datePickerInterval);
        }
    });
});
user_198082250
Related