Question

我在jsf 1.1中使用jquery.datePicker.js作为我的日期选择器图标。当我的日历图标位于页面的最右侧时，单击该图标时，由于页面的宽度仅是有限的，因此无法显示超过一半的日历弹出窗口。

弹出窗口的其余部分正常工作，只有当它放在右边缘时才能正常显示，因为日历显示在图标的右侧。

在这种情况下，我该怎么办才能让它显示在左侧。

任何帮助或建议将不胜感激，提前感谢

Answer 1

我刚才在Angular bootstrap应用程序中遇到过这个问题。我通过使用CSS定位所需的日期选择器并更改其定位来解决我的问题。

例如，在我的角度应用程序中，我有一个像这样设置的日期选择器：

<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-menu的bootstrap datepicker类来定位此特定日历，如下所示：

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

（其中.dropdown-menu是angular-bootstrap的datepicker类）

您可以随意修改定位。

虽然我不熟悉jquery datepicker，但我检查了源代码，看起来好像它的类是'.ui-datepicker'

因此，如果是这种情况，您可以使用以下方法执行相同的操作：

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

否则，使用您的开发工具检查datepicker并尝试确定哪个jQuery类正在设置其定位。

jquery日期选择器显示超出页面范围

1 个答案: