我在扩展中具有多种形式,并且我正在使用此代码作为日期选择器
<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;
}
但这并不能解决问题,也试图弄乱显示/位置,但我无法解决。
知道有什么问题吗?
答案 0 :(得分:3)
您需要使用溢出属性,因为日历没有空间。我认为它将解决您的问题。
.md-drppicker {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
ngx-daterangepicker-material {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
如果问题仍然存在,我建议您附加一个stackblitz实例。
答案 1 :(得分:0)
我正在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;
}
使用上述方法后,我们的日历会正确地显示在相邻图层上,并且当启动日历的区域小于并排显示日历所需的宽度时,不会包裹日历。