Question

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

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

Answer 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'
        });
    }
});

Answer 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
    });
});

如果你使用点击显示日期选择器或按钮选项，这应该有用。

Answer 3

注意使用以＆＃34; _＆＃34;开头的变量，它假设仅供私人使用：）

我的解决方案：

$(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
        });
    }
});

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

3 个答案: