Position Angular UI Datepicker Outside Scrollbar

Question

我在滚动容器中有一个日期选择器。问题是当它出现时它被限制在滚动条内并弄乱了滚动条的高度，我希望弹出窗口显示 outside/in-front 滚动条漂亮且平滑，因此不会导致高度问题。

看到这个fiddle

<div ng-controller="DatepickerDemoCtrl">
<div class="row">
    <div class="col-md-6">
        <div class="input-group">
          <input
            type="text"
            id="popup"
            class="form-control"
            datepicker-popup=""
            ng-model="today"
            is-open="opened"
            min-date="minDate"
            max-date="'2015-06-22'"
            ng-click="open()"/>
          <span class="input-group-btn">
            <label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
          </span>
        </div>
    </div>
</div>
<pre>Selected date is: <em>{{today}}</em></pre>

body {padding:20px}
.col-md-6{
    overflow:scroll;
    height:200px;
    background:red;
    }
.input-group{
    background:green;
    height:300px;
}

Answer 1

将 appendToBody 更改为 true。

.constant('datepickerPopupConfig', {
  datepickerPopup: "MMM d, yyyy",
  closeOnDateSelection: true,
  appendToBody: fasle,
  showButtonBar: false
})

Answer 2

在 ui-bootstrap.js 中更改 appendToBody: true 的同时，我还必须将 z-index 值更改为 1051

// ui-bootstrap.js
.constant('uibDatepickerPopupConfig', {
    appendToBody: true
)}

.uib-datepicker-popup.dropdown-menu {
    z-index: 1051 !important;
}

Position Angular UI Datepicker Outside Scrollbar

Position Angular UI Datepicker Outside Scrollbar

angularjs

angular-ui

angular-ui-bootstrap