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

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来确保它保持固定,如果这就是你所追求的.有关如何控制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;

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