讓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); 
}