让 jQuery UI 的日期选择器始终以某个方向打开？

Question

我在页面底部的

position: fixed

工具栏中使用 jQuery UI 的日期选择器控件。有时，在随机计算机上，日期选择器会出现在工具栏下方，这意味着它位于页面之外，无法查看或与之交互。

有没有办法强制日期选择器控件的位置始终位于其

<input>

的上方和右侧？

Answer 1

唯一确定的方法（对于日期选择器的 jQueryUI 版本）是禁用尝试在视口内渲染的日期选择器的功能。这是一种无需修改源代码文件即可实现的方法：

$.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

问题是

<input>

中的

position: fixed

元素显示顶部位置 0px（检查：

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

检查一下。我使用了它并且能够在所有浏览器中定位日期选择器控件。

Answer 5

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

这就是我所做的。 诚然，这是一个克鲁格，但它有效，所以我认为它可能对其他人有帮助。 希望将来 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' 方法 来实现您想要的结果。但是，使用它很可能意味着您必须实现一些用日期选择器开箱即用的粘合功能，例如用于提取日期的回调处理程序等。

我尝试模拟一些代码来查看它的运行情况，但由于无法显示日期选择器，所以我无法完全让它工作。 不管怎样，我想向你指出这一点，以防你的运气比我好。