Как изменить позицию jqery ui datepicker?

Ответ 1

Конечно. Поскольку всегда активен только один активный датапик, вы можете выбрать активный datepicker с помощью:

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

и измените его положение:

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

ИЗМЕНИТЬ

Будь, хитрый. Если вы устанавливаете верхнюю или левую позицию в beforeShow, она снова переопределяется плагином datepicker. Вы должны поместить изменения css в setTimeout:

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

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

Объяснение о setTimeout(function () {}, 0): Почему setTimeout (fn, 0) иногда полезно?

Ответ 2

Если вы действительно застряли, вы можете отредактировать свой jquery-ui- [version].custom.js. Функция, которая контролирует положение, в котором будет отображаться каландр:

_findPos: function (obj) {       var position,           inst = this._getInst (obj),           isRTL = this._get (inst, "isRTL" );

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? "previousSibling" : "nextSibling"];
    }

    position = $(obj).offset();
    return [position.left, position.top];
},

У меня есть собственный код, который использует преобразование CSS3 для увеличения или уменьшения страницы в зависимости от ее ширины. Это выдает координаты экрана, на которые опирается виджет календаря. Я добавил некоторый пользовательский код в _findPos для обнаружения и обработки уровня масштабирования. Измененный код выглядит следующим образом:

_findPos: function(obj) {
    var position,
        inst = this._getInst(obj),
        isRTL = this._get(inst, "isRTL");

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? "previousSibling" : "nextSibling"];
    }

    position = $(obj).offset();
    /* Custom Code for Zoom */
    var zoomLevel = 1;
    var minW = 1024;
    if ($(window).width() > minW)
               { zoomLevel = $(window).width() / minW;}
    return [position.left, position.top/zoomLevel];
},

Ответ 3

Может быть, старый вопрос, но сам столкнулся с проблемой сегодня и не мог заставить другие предложения работать. Исправлено это в качестве альтернативы (с помощью .click(function(){}) и хотелось добавить два моих центов.

У меня есть поле ввода с id sDate, которое при щелчке отображает датупик.

То, что я сделал для решения проблемы, - это добавить в поле #sDate процедуру click.

$('#sDate').click(function(){  //CHANGE sDate TO THE ID OF YOUR INPUT FIELD 
    var pTop = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
    var pLeft = '10px';  //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
    $('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});