让jQuery UI的datepicker总是在某个方向打开？

Question

我在页面底部的position: fixed工具栏中使用jQuery UI的datepicker控件。偶尔，在随机电脑上，日期选择器出现在工具栏下方，这意味着它离开页面并且不可能查看或与之交互。

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

Answer 1

你可以改变线路：

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 2

从文档看来，您可能可以使用datepicker插件的'dialog' method来实现预期的结果。然而，使用这个最有可能意味着你将不得不实现一些你会用datepicker获得开箱即用的粘合剂，例如提取日期的回调处理程序等。

我试过了去模拟一些代码来看看它是否在行动中，并且没有让日期选择器显示出来，但是我无法完成它的工作。无论如何，如果你比我有更好的运气，我想指出你的意见。

Answer 3

问题是该元素的位置：固定显示顶部位置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 4

只有这样，才能肯定（对日期选择器的jQueryUI的版本）是禁用，试图使里面的日期选择器的功能视口。这里有一个办法做到这一点无需修改源代码文件：

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

介绍jQuery UI尝试更高版本：

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

这只是核弹内的日期选择器功能_checkOffset，使得它疯狂的。然后，您可以使用.ui-datepicker css来确保它保持固定，如果这就是你所追求的。更多信息在how-to-control-positioning-of-jqueryui-datepicker。

Answer 5

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

检查此。我用这个，并能够在所有浏览器中定位datepicker控件。

Answer 6

我有类似的问题。我有一个包含日期选择器的页面，这些日期选择器可以用在页面上的各种日期选择器中，但也包含在固定标题中，用户可以在固定标题保持原位的情况下在水平和垂直方向上滚动页面。标题也有一个日期选择器。所以我不能做一个datepicker的全球变化。

这就是我所做的。无可否认它是一种克鲁格，但它起作用，所以我认为它可能会帮助其他人。希望将来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); 
}