如何通过单击输入 Angular 来调用 datepicker答案

【问题标题】：How to call datepicker by clicking on input Angular如何通过单击输入 Angular 来调用 datepicker
【发布时间】：2019-12-10 06:49:20
【问题描述】：

这是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 将被调用 通过点击输入没有图标像这样

这里是角度日期选择器示例 -> https://stackblitz.com/angular/xvjleypolka?file=src%2Fapp%2Fdatepicker-overview-example.html 如果您有其他方法可以将 datepicker 集成到角度欢迎输入中

【问题讨论】：

stackoverflow.com/questions/46344213/…的可能重复

标签： html angular datepicker

【解决方案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>

工作DEMO

【讨论】：

【解决方案2】：

你可以加(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>

Working Demo

【讨论】：

我想我也可以添加 (click)="picker.open()" ？
在我看来，使用 (click)="picker.open()" 实际上会更好。这样，每次您单击输入时，它都会打开 DatePicker。否则，如果输入字段已经获得焦点，则 DatePicker 不会在单击时打开。

【解决方案3】：

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>

【讨论】：