Toggle Angular Material DatePicker on MatSelect 单击并选择所选日期答案

【问题标题】：Toggle Angular Material DatePicker on MatSelect click and choose the date selectedToggle Angular Material DatePicker on MatSelect 单击并选择所选日期
【发布时间】：2018-04-02 07:30:32
【问题描述】：

当我点击角垫选择控件时，我试图让材料日期选择器自动打开。

<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 控件中选择的选项。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

要在单击select 元素时自动打开DatePicker，您可以将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 之外，并与它并排放置）。

编辑

On second thoughts, you can call picker.open() when the select element emits the onOpen event, this would solve the positioning problem.

<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>

【讨论】：

@thanks 错误，解决了。但只是想知道如何让日期选择出现在 mat-select 控件上。同样，当在 mat-select 控件的前 2 个选项上单击一次时，它会关闭 datepicker 控件并不会碰巧选择该选项。
很高兴它有帮助。对于您问题的第二部分，您希望当用户在选择中选择一个选项（即日期）时，在 DatePicker 中选择相同的日期？
嘿，错误，当用户从日期选择器中选择日期或用户选择其他 2 个选项时，该值应作为已选择的值显示在控件上。
好吧，我想我明白了，当您说在控件上时，您的意思是在 mat-select 元素上？
没错，就是2个控件合二为一[mat-select里面的datepicker]。用户可以从 datepicker 或 mat-select 控件的前 2 个选项中选择日期，无论哪种方式，所选值都应该出现在 mat-select 元素上。