How to Change the Pop-Up Position of the Jquery Datepicker Control

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

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.

How to change jquery ui datepicker position?

Sure it is. As there's always only one datepicker active, you can select active datepicker with:

var $datepicker = $('#ui-datepicker-div');

and change its position:

$datepicker.css({
    top: 10,
    left: 10
});

EDIT

Whoah, tricky one. If you set top or left position in beforeShow, it gets overriden again by datepicker plugin. You have to put css changes in a setTimeout:

$("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: 100,
                left: 200
            });
        }, 0);
    }
});

DEMO: http://jsfiddle.net/BWfwf/4/

Explanation about setTimeout(function () {}, 0): Why is setTimeout(fn, 0) sometimes useful?

How to control positioning of jQueryUI datepicker

Posting this in hopes that it will help others. At least as of v1.8.1 of datepicker, using 'window.DP_jQuery.datepicker' no longer works, because the pointer(right term?) now is named with a timestamp of its creation - so for example it would now be 'window.DP_jQuery_1273700460448'. So now, rather than using the pointer to the datepicker object, refer to it directly like this:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

Many thanks for the answer below for getting me what I needed.

bootstrap date picker position

When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc

after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:

var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
            orientation: 'bottom'
        };

Let me know how that goes!

Positioning of JqueryUI datepicker: how to set its position relative to where it would automatically show up?

I initially thought you would need to wire into a 'onshow' event, so following that train of thought, I found this SO question: How to change jquery ui datepicker position?

In the event handler shown in the sample below from that post, you can then set the position correctly, ie. relative to the other control.

$("#datepicker").datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function () {
            inst.dpDiv.css({
                top: 100,
                left: 200
            });
        }, 0);
    }
});

move the position of bootstrap datepicker

What you need is little bit of jquery

see here

JQuery

$('#datetimepicker1').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

About positioning of datepicker read here

---

Related Topics