Question

我在页面底部的position: fixed工具栏中使用了jQuery UI的datepicker控件。偶尔，在随机计算机上，日期选择器会出现在工具栏下方，这意味着它不在页面内，无法查看或与之交互。

有没有办法强制将datepicker控件的位置始终位于<input>的上方和右侧？

Answer 1

确定（对于jQueryUI版本的datepicker）唯一的方法是禁用尝试在视口内渲染的datepicker的功能。这是一种不修改源代码文件的方法：

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

在更高版本的JQuery UI上尝试：

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

这只是在datepicker中核对_checkOffset函数，使其松散。然后你可以使用.ui-datepicker css来确保它保持固定，如果这就是你所追求的。有关详情，请访问how-to-control-positioning-of-jqueryui-datepicker。

Answer 2

问题是位置中的元素：fixed show top position 0px（check with：alert $（'＃datepicker2'）。position（））。

解决方案：

$('#datepicker').datepicker( {beforeShow: function(input) {
    var x = 100; //add offset
    var y = 20; 
    field = $(input);
    left = field.position().left + x;
    bottom = y;
    setTimeout(function(){
        $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});      
    },1);                    
}}

测试HTML：

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
  <label>
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
  </label>
</form>

Answer 3

您可以更改行：

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;

......阅读：

offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;

但是，这会失去灵活性。如果您的输入恰好位于页面顶部，那么您将遇到与以前相反的问题。

Answer 4

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

检查一下。我使用了这个，并且能够在所有浏览器中定位datepicker控件。

Answer 5

我有类似的问题。我有一个页面，日期选择器可能在页面上的各种位置使用，但也在固定标题上，用户可以在水平和垂直方向上滚动页面，固定标头保持在原位。标题还有一个日期选择器。所以我无法对datepicker进行全局更改。

这就是我所做的。它无疑是一个kluge，但它的工作原理，所以我认为它可能会帮助别人。希望将来jquery datepicker将添加一个位置选项。

beforeShow: function(input, inst) {
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );

    window.setTimeout(function() { 
        var leftPosition = parseInt($(window).width() / 2);
        $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
        $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
    }, 500);
}

Answer 6

从文档中看，您似乎可以使用datepicker插件的'dialog' method来实现所需的结果。但是，使用这个很可能意味着你必须实现一些胶水，否则你会使用datepicker开箱即用，例如提取日期的回调处理程序等。

我试图模拟一些代码以查看它的实际效果并且没有显示日期选择器，但我无法让它工作。无论如何，我想指出你，以防万一你有比我更好的运气。

让jQuery UI的datepicker始终在某个方向打开？

6 个答案: