jquery日期選擇器顯示超出頁面範圍

Question

我在jsf 1.1中使用jquery.datePicker.js作爲我的日期選取器圖標。當我的日曆圖標放置在頁面的最右側時，單擊該圖標時，由於頁面的寬度僅爲有限，因此無法顯示一半以上的日曆彈出窗口。

彈出窗口在頁面的其餘部分上正常工作，只有當日歷放置在右邊緣時纔會正確顯示，因爲日曆顯示在圖標的右側。

在這種情況下，我該如何讓它顯示在左邊？

任何幫助或建議，可以理解，在此先感謝

Answer 1

我在角度引導有這個問題的應用程序前一陣子。我通過使用CSS定位所需的datepicker並更改其位置來解決我的問題。

例如，在我的角度的應用程序，我有一個日期選擇器設置是這樣的：

<div class="calendar-box"> 
    <input ng-model="split.shipDate" min-date="split.shipDateMin" max-date="split.shipDateMax" ng-click="dateOpen($event, split, 'shipDateOpened')" type="text" datepicker-popup="{{model.datePickFormat}}" is-open="split.shipDateOpened" ng-change="setCancelDate(split)" ng-readonly="true"> 
    <i class="calendar desktop" ng-click="dateOpen($event, split, 'shipDateOpened')"></i> 
</div> 

然後我使用定位父類，然後引導日期選擇器類.dropdown菜單爲這個特定的日曆如下：

.calendar-box .dropdown-menu { 
    left: 0 !important; 
} 

（其中.dropdown菜單是角引導的日期選擇器類）

您可以修改的定位，都可以。

雖然我不熟悉jQuery的日期選擇器，我檢查了源代碼，它看起來好像它的類「的.ui-日期選擇器」

因此，如果是這樣的話，你可以做同樣的事情通過使用：

.parent-class .ui-datepicker { 
    /*Some sort of positioning here*/ 
} 

否則，使用您的開發工具來檢查datepicker，並試圖找出哪個jQuery類正在設置其定位。