Выбор даты на основе MatDatePicker - открытый выбор и фокус ввода - PullRequest
Новая
       30

Выбор даты на основе MatDatePicker - открытый выбор и фокус ввода

0 голосов
/ 03 декабря 2018

Пример Stackblitz

Привет, сообщество. Я создал пользовательский компонент выбора даты, основанный на Angular Material DatePicker.Он имеет следующие дополнительные функции:

  • маска ввода для немецкого формата даты
  • Открытие календаря при нажатии на поле ввода

При нажатии на поле ввода (цвет фона: коричневый), календарь открывается и поле ввода сфокусировано.Таким образом, пользователь может выбрать дату из календаря или ввести ее вручную в поле ввода.

При щелчке по полю mat-form (цвет фона: белый) поле ввода по умолчанию фокусируется.Я захватил событие щелчка, чтобы дополнительно открыть средство выбора даты: 

<mat-form-field (click)="datePicker.open();">

Календарь открывается, но поле ввода не фокусируется.Даже когда я добавляю метод focus в обработчик события click, поле ввода не фокусируется: 

 <mat-form-field (click)="datePicker.open(); input.focus()">

Похоже, мне пришлось выбирать, хочу ли я открыть календарь илиполе ввода фокусировалось при щелчке поля mat-form-field, но я хочу и то и другое: -)

Другой неудачный подход заключался в захвате события onContainerClick поля mat-form-field.

Я такжепопытался вызвать метод input.click() в методе mat-form-field.click(), но также безуспешно.

Любые идеи о том, как можно добиться того же поведения при нажатии на поле mat-form-field, которое я получаю при нажатии на поле ввода?

Большое спасибо.

1 Ответ

0 голосов
/ 04 декабря 2018

Мне удалось просто поместить вызов метода this.dateInput.nativeElement.focus() в функцию setTimeout:

Шаблон: 

<mat-form-field (click)="datePicker.open(); focusInputField();">

Код позади: 

  focusInputField() {
    setTimeout(() => this.dateInput.nativeElement.focus());
  }

Я обновилПример стекаблиц.

...