如何通过单击输入 Angular 来调用日期选择器

Question

这是 html 文件：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

并且datepicker通过单击图标（ mat-datepicker-toggle ）来调用。 ->

但我希望通过单击输入没有这样的图标来调用datepicker

这是示例 angular datepicker -> https://stackblitz.com/angular/xvjleypolka?file=src%2Fapp%2Fdatepicker-overview-example.html如果您有另一种方式将 datepicker 集成到 angular 中输入欢迎

Answer 1

使用如下：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" 
  (click)="picker.open()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

工作演示

Answer 2

MatDatePicker有open方法可以手动打开它。

所以只需将它用于输入的(focus)="picker.open()"

<mat-form-field>
  <input matInput (focus)="picker.open()" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 3

您只需添加(focus)="picker.open()"

像这样尝试：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date"  (focus)="picker.open()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

工作演示