15

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

有没有办法强制 datepicker 控件的定位始终在其上方和右侧<input>？

4

6 回答 6

19

唯一可以确定的方法（对于日期选择器的 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。

于 2009-11-30T22:36:42.407 回答
10

问题是元素在位置：固定显示顶部位置 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>
于 2009-10-30T01:20:44.413 回答
6

您可以更改以下行：

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;

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

于 2009-10-27T18:36:47.430 回答
3

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

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

于 2011-08-01T20:08:06.643 回答
1

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

这就是我所做的。诚然，它是一个 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);
}
于 2012-05-06T07:55:59.590 回答
0

从文档来看，您似乎可以使用 datepicker 插件的“对话”方法来实现您想要的结果。但是，使用它很可能意味着您必须实现一些胶水，否则您将使用 datepicker 开箱即用，例如用于提取日期的回调处理程序等。

我试图模拟一些代码来查看它的运行情况，但没有让日期选择器显示出来，但我无法让它正常工作。无论如何，我想向你指出它，以防你比我运气好。

于 2009-10-28T22:45:39.653 回答