jquery-ui datepicker在放大时不保持其相对于其元素的位置答案

【问题标题】：jquery-ui datepicker does not keep its position relative to its element when zooming-injquery-ui datepicker在放大时不保持其相对于其元素的位置
【发布时间】：2014-02-17 15:42:39
【问题描述】：

如果将输入（附加日期选择器）放在带有margin: 0px auto 的元素内，则会出现jquery-ui datepicker 的小问题。如果放大 (ctrl +)，则显示的日期选择器不会保持其相对于输入的位置。当填写表格时自动放大时，它会在移动浏览器中引起一些问题。如果margin: 0px auto 被删除没有问题，但我想保留它。

小提琴：http://jsfiddle.net/hcvfC/1/

【问题讨论】：

看起来'ui-datepicker-div'在第一次创建时是绝对定位的。所以它不会与margin: 0 auto; 对齐。不确定是否有解决方案（不弄乱日期选择器代码）

标签： jquery css jquery-ui jquery-ui-datepicker

【解决方案1】：

这是我对问题的解决方案：

$(window).on('resize orientationchange', function (e) {
    if ($.datepicker._datepickerShowing) {
        var datepicker = $.datepicker._curInst;
        dpInput = datepicker.input;
        dpElem = datepicker.dpDiv;
        dpElem.position({
            my: 'left top',
            of: dpInput,
            at: 'left bottom'
        });
    }
});

【讨论】：

【解决方案2】：

另一个在缩放或方向改变时不会触发重新定位的选项，以防日期选择器并不总是被触发，是在关注附加了日期选择器的元素时重新定位：

// Add event handler when focused on an element with which has datepicker intialised
$('.hasDatepicker').on('focus', function() {

    // store the element for use inside the position function
    var $target = $(this);

    // get the elements datepicker widget object and set it's position based on the target element
    $target.datepicker('widget').position({

        my: 'left top',
        at: 'left bottom',
        of: $target
    });
});

如果您使用点击显示日期选择器或按钮选项，这应该可以工作。

【讨论】：

【解决方案3】：

注意使用以“_”开头的变量，它应该仅供私人使用:)

我的解决方案：

$(window).on('resize orientationchange', function(){
    var $elActive = $(document.activeElement);
    if( $elActive.is('.hasDatepicker') ){
        $elActive.datepicker('widget').position({
            my: 'left top',
            at: 'left bottom',
            of: $elActive
        });
    }
});

【讨论】：