如何在回车键上关闭 Angular Material Mat Datepicker Calendar

Question

是否可以在按回车键时关闭 Mat Datepicker Calendar window？ 现在，如果我单击我的表单输入字段，日历就会打开。 我希望能够按回车键但关闭日历 window 并且不让它保持打开状态。

<form #form="ngForm" (keyup.enter)="sumbitByEnter($event)">
    <mat-form-field floatLabel="never">
      <input name="id" matInput placeholder="Search for student by ID number" 
      [(ngModel)]="model.id" minlength="9" maxlength="9" #uname="ngModel">
    </mat-form-field>

<mat-form-field>
   <input name="startDate" matInput [max]="model.endDate" [matDatepicker]="picker" 
   (click)="picker.open()" (focus)="picker?.open()" placeholder="Start Date" 
   [(ngModel)]="model.startDate">
       <mat-datepicker-toggle matSuffix></mat-datepicker-toggle>
       <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

</form>

Answer 1

您可以通过@ViewChild 访问您的日期选择器并列出全局输入事件，然后一旦用户按下输入，您就可以捕获此事件结束调用“close()”，这将关闭面板。 所以它在你的 TS 文件中会是这样的：

// getting reference to date picker
@ViewChild(MatDatepicker) private rangePicker: MatDatepicker<Date>;

globalEnter = fromEvent<KeyboardEvent>(document, 'keyup')
      .pipe(
        filter((event) => event.keyCode === ENTER),
        tap(console.log)
      )
      .subscribe(() => this.rangePicker.close())

当然导入所有导入（输入您可以从'@angular/cdk/keycodes'导入）并正确处理取消订阅等。