从 TypeScript 打开 Angular Mat-datepicker

Question

I have a select like this :

 <mat-select placeholder="..." (change)="onChange($event.value)">
     <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option }}
     </mat-option>
 </mat-select>
 <div class="disable">
    <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
       <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
 </div>

禁用类只隐藏div的内容。

在我的onChange($event)函数中：

onChange(value) {
   if(value === 'someValue'){
       openDatePicker() //How to do this ??
   }
}

如果选择了特定的值，我想要打开日期选择器。从TypeScript可以实现吗？

谢谢您的回复。

- Helene

---

请查看以下链接以了解有关Angular Material 2日期选择器自动打开的信息：https://dev59.com/DlcO5IYBdhLWcg3wZQzX#45874934 和 https://material.angular.io/components/datepicker/api#MatDatepicker - Pengyy

Answer 1

您需要使用 ViewChild 在代码中获取日期选择器，就像这样：

@ViewChild('picker') datePicker: MatDatepicker<Date>;

然后在您的函数中，您可以调用日期选择器的open()方法：

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

链接到StackBlitz演示。

- FAISAL

Answer 2

使用TS中的ViewChild创建日期选择器对象，示例如下：

@ViewChild('picker') datePicker: MatDatepicker;

使用MatDatepicker的预定义方法open，如下所示：

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

- Anshuman Jaiswal

---

那跟我的答案有什么不同？ - FAISAL

Answer 3

对于那些试图在最新版本的Angular上使其工作的人，您需要向@ViewChild添加第二个参数：

  @ViewChild('picker', {read: undefined, static: false}) datePicker: MatDatepicker<Date>;

并在您的函数中经常引用该对象：

onChange(value) {
  if(value === 'someValue'){
    this.datePicker.open();
  }
}

- HaniBhat