AngularJS - 出现在模态后面的日期选择器

Posted 2023-05-07

【中文标题】AngularJS - 出现在模态后面的日期选择器

【英文标题】：AngularJS - datepicker coming up behind modal

【发布时间】：2017-01-05 18:27:40

【问题描述】：

不仅仅是一个问题，这是我最近不得不处理的事情的分享，我花了几个小时才把它放在正确的地方。

我在模态窗口中使用日期选择器，当我单击控件时，日历出现但在模态窗口后面，假设在父窗口和模态窗口之间

查看完所有地方后，我可以通过简单地更改标记中的属性来修复： 日期选择器附加到正文： true --> 使日历显示在模式后面； false --> 日历显示在模态框内的正确位置；

这是我的标记示例：

<div class="input-group">
  <input type="text"
    class="form-control input-sm"
    ng-model="scheduleDates.startDate"
    jquery-maskedinput
    data-mask="99/99/9999"
    data-mask-placeholder="MM/DD/YYYY"
    uib-datepicker-popup="MM/dd/yyyy"
    datepicker-append-to-body="false"
    is-open="datePicker.startDateIsOpen"
    close-text="Close"
    datepicker-options="dateOptions" />
  <div class="input-group-btn">
    <button 
       type="button" 
       class="btn btn-sm btn-default" 
       ng-click="openStartDatePicker()">
    <i class="glyphicon glyphicon-calendar"></i> 
    </button>
  </div>
</div>

【问题讨论】：

Twitter Bootstrap Datepicker within modal window的可能重复

【参考方案1】：

将 datepicker-append-to-body 属性设置为 false 以仅在 modal 中（在 modal 前面）显示日历