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类正在设置其定位。