Angular ngx daterangepicker z-index答案

【问题标题】：Angular ngx daterangepicker z-indexAngular ngx daterangepicker z-index
【发布时间】：2020-07-31 02:24:12
【问题描述】：

我在扩展中有多个表单，并且我使用此代码作为日期选择器，

<mat-form-field>
  <input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>

效果很好，扩展并没有隐藏它(have a look)，但是我有日期和时间的开始和结束值，所以我切换到 ngx material daterangepicker。

我唯一的问题是扩展隐藏了 daterangepicker (have a look)，所以 daterangepickers 代码如下所示：

      <mat-form-field>
        <input
          matInput
          ngxDaterangepickerMd
          name="daterange"
          placeholder="Choose date"
          applyLabel="Okay"
          startKey="start"
          endKey="end"
          firstMonthDayClass="first-day"
          lastMonthDayClass="last-day"
          emptyWeekRowClass="empty-week"
          lastDayOfPreviousMonthClass="last-previous-day"
          firstDayOfNextMonthClass="first-next-day"
          [autoApply]="options.autoApply"
          [linkedCalendars]="options.linkedCalendars"
          [singleDatePicker]="options.singleDatePicker"
          [showDropdowns]="true"
          formControlName="date"

          [showWeekNumbers]="options.showWeekNumbers"
          [showCancel]="options.showCancel"
          [showClearButton]="options.showClearButton"
          [showISOWeekNumbers]="options.showISOWeekNumbers"
          [customRangeDirection]="options.customRangeDirection"
          [lockStartDate]="options.lockStartDate"
          [closeOnAutoApply]="options.closeOnAutoApply"
          [opens]="opens"
          [drops]="drops"
          [timePicker]="timePicker"
        />
      </mat-form-field>

我试图给它一个自定义的 z-index，比如：

.md-drppicker {
  z-index: 9999;
}

ngx-daterangepicker-material {
  z-index: 9999;
}

但这并没有解决问题，也尝试弄乱显示/位置，但我无法修复它。
知道有什么问题吗？

编辑：Here's a better picture for the daterange picker problem

【问题讨论】：

你有没有找到一个解决方案，让它以更高的 z-index 显示，这样它就不会隐藏在滚动区域中？我在我们的应用程序中处理相同类型的问题。我们尝试使用 Renderer2 以将其提升到更高的水平，这适用于显示，但随后它破坏了所有预期的用户点击功能。这意味着用户在日历上的每一次点击都会导致日历关闭。感谢您的任何意见。

标签： css angular z-index date-range ngx-daterangepicker-material

【解决方案1】：

您需要使用溢出属性，因为日历没有空间。我认为它会解决您的问题。

.md-drppicker {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

ngx-daterangepicker-material {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

如果问题仍然存在，我建议您附加一个 stackblitz 实例。

【讨论】：

【解决方案2】：

我在 Angular 6.1.10 上使用 ngx-daterangepicker-material 2.4.1 版本

我们的问题在于使用 MatInput 和 angular-split-ng6。

我们实现的 css 修复如下

.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
    position: fixed;
}

使用上述方法后，我们的日历在相邻图层上正确渲染，并且当启动日历的区域小于并排显示日历所需的宽度时，它没有包裹日历。

【讨论】：