Question

当我点击角度垫选择控件时，我正在尝试自动打开材质日期选择器。

<mat-select formControlName="postDate" (focus)="openCalendar(picker)" (click)="openCalendar(picker)">
  <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>

我尝试使用焦点和点击mat-select控件的事件，这样做不起作用。

openCalendar(datePicker: MatDatepicker<Date>) {
    datePicker.open();
}

也可以有人帮助选择，选择日期应该具有该日期作为在mat-select控件中选择的选项。

Answer 1

要在点击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()方法后移动了元素。我可能会考虑重新排列这些元素，以便您不必处理这个问题（即将datePicker移到select之外，并将其与它并排放置）。

修改

再想一想，当select元素发出picker.open()事件时，您可以调用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>

在MatSelect上切换角度材质DatePicker，然后单击并选择所选日期

1 个答案: