打开 UI 日期选择器日历 upside/downside

Question

我正在使用 Boot strap 日历 ui-datepicker 并使用以下代码弹出日历。

<input type="text" name="expectedClosedDate" class="form-control width-160 float-left" uib-datepicker-popup="{{expectedClosedDate.format}}" min-date="minDate" ng-model="ideaDetail.Idea.ExpectedCloseDate" datepicker-options="expectedClosedDate.dateOptions" close-text="Close" is-open="expectedClosedDate.isOpened" disabled date-disabled="expectedClosedDate.disabled(date, mode)" />
            <span class="addon-brit input-group-addon mouse-hand float-left" ng-click="expectedClosedDate.open()" style="width:50px;line-height: 1.68">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>

问题是，它打开日历向下，根据我的 UI 我想打开它向上。有什么建议吗？

Answer 1

默认情况下，日期选择器元素创建在输入下方。该 pate picker 元素上有一个样式：

    display: block;
    top: 34px;
    left: 0px;

选择器高度约为 288px，因此如果您将 top 设置为 -290px，那么它将位于输入上方。

所以您可以使用 css 来做到这一点。这个想法是：给输入一个 id，如上所述设置该输入的下一个 ul 元素的样式。

打开 UI 日期选择器日历 upside/downside

Open UI datepicker calendar upside/downside

jquery

uidatepicker

angularjs