在MatSelect上切换角度材质日期选择器单击并选择所选日期

自动打开 DatePicker 当 select 元素,则可以修改html,如下所示:

<mat-select formControlName="postDate" (click)="picker.open()">
    <mat-option value="8555"><i>Delay Crew - 8555</i></mat-option>
    <mat-option value="9000"><i>Self Install - 9000</i></mat-option>
    <mat-option>
        <mat-input-container>
            <input matInput [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-input-container>
    </mat-option>
</mat-select>

这是可行的,但日历打开的位置错误,因为元素在 open() 方法已调用。我可能会考虑重新排列元素,这样就不必处理这个问题(即,将日期选择器移到select之外,并将其与之并排放置)。

编辑

再想一想,你可以打电话 picker.open() 当select元素发出 onOpen 事件,这将解决定位问题。

<mat-select formControlName="postDate" (onOpen)="picker.open()">
    <mat-option value="8555"><i>Delay Crew - 8555</i></mat-option>
    <mat-option value="9000"><i>Self Install - 9000</i></mat-option>
    <mat-option>
        <mat-input-container>
            <input matInput [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-input-container>
    </mat-option>
</mat-select>