Как закрыть календарь Datepicker Angular Material Mat при нажатии клавиши ввода

Question

Можно ли закрыть окно календаря Mat Datepicker при нажатии клавиши ввода? Прямо сейчас, если я щелкну поле ввода формы, откроется календарь. Я хочу иметь возможность нажимать клавишу ввода, но закрывать окно календаря, чтобы оно не оставалось открытым.

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

Конечно, импортируйте весь импорт (ENTER, вы можете импортировать из '@ angular / cdk / keycodes'), а также правильно обработать отписку et c.