Custom Date Picker Based On MatDatePicker - Open Picker and Focus Input

0
votes

Stackblitz Example

Hi community I created a custom date picker component that is based on the Angular Material DatePicker. It has the following additional features:

  • input mask for German date format
  • Opening calendar when clicking input field

When clicking input field (background color: brown), the calendar opens and the input field is focused. So the user can either choose a date from the calendar or type it manually into the input field.

When clicking the mat-form-field (background color: white), the input field gets focused by default. I grap the click event to additionally open the datepicker:

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

The calendar opens but the input field does not get focused. Even when I add the focus-method to the click-eventhandler, the input field does not get focused:

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

It seems like I had to choose if I'd like to have the calendar open or the input field focused when clicking the mat-form-field, but I want both :-)

Another unsuccessful approach was to grap the onContainerClick event of the mat-form-field.

I also tried to call the input.click() method in the mat-form-field.click() method but also without success.

Any ideas how I can achieve the same behaviour on clicking the mat-form-field that I get when clicking the input field?

Thank you very much.

1
angularangular-material2angular7
but the stackblitz you attached is working fine – h_w
@hana_wujira Unfortunately it isn't. Please click the white area (mat-form-field) --> the calendar opens but the input is not focused, the cursor is not in the input field so that you could start to type a date – MatterOfFact

1 Answers

2
votes

I succeeded in just putting the this.dateInput.nativeElement.focus() method call into a setTimeout function:

Template:

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

code behind:

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

I updated the stackblitz example.