angular - ngb-datepicker 在 Angular Material 输入(matInput)中不起作用

Question

我想在 Material Input 中使用 ngb-datepicker 。我成功地将 datepicker 应用于 mat 输入。但是月份和年份下拉列表存在问题。

我尝试了以下代码段:

<mat-form-field>
<input matInput placeholder="Select Valid Till" name="GodownValidTill" [(ngModel)]="GodownValidTill" ngbDatepicker #d2="ngbDatepicker" required readonly>
<mat-icon style="float:right;height:20px;width:20px;" (click)="d2.toggle()" svgIcon="calendar" title="Calendar"></mat-icon>
</mat-form-field>

有没有完美工作的解决方案？

Answer 1

我试图重现这个问题，发现默认情况下 ngbDatePicker 附加在它所附加的输入字段的正下方。当我们使用 matInput 时，实际的输入字段会被包裹在导致日期选择器出现问题的各种 Material 类中。

所以，我们可以做的是，我们可以使用 container 将日期选择器附加到正文中。 ngbDatepicker 的属性(property)像这样。容器属性目前仅支持“body”作为值。

    <mat-form-field>
            <input matInput type="text" ngbDatepicker container="body" #d="ngbDatepicker" (click)="d.open()" placeholder="Date Picker with issue"/>
    </mat-form-field>

这是 stackblitz demo对于相同的。我希望这将有所帮助。