Angular Material datepicker for multiple input fields

Question

I have a form with multiple text box inputs to which dates are entered. I am using a single instance of Angular Material datepicker and apply its values to the fields via TS code.

(dateChange)="onDateChange($event)

If I select a date, e.g: Nov 18, it gets entered into a specified field. from the value of the param: $event.

Now the datepicker is set to the given date - Nov 18. If I need the same date in my next input field, and click on the same date on datepicker, it remains silent - the event 'dateChange' is not triggered, because no date change took place. However, I would like to apply the same date without flipping to another date and than back to my desired / previously already set date Nov 18.

Is there a way I can force datepicker to accept that given click on the same date? Or some work around trick?

Felix Felix · Accepted Answer · 2019-11-21T09:39:25

Here is a simple solution I figured out for those interested:

In the template/view:

<input matInput [matDatepicker]="picker" 
                [formControl]="datePickerCfg.formControlDate"  // <<<---
                (dateChange)="onDateChange($event)">
<mat-datepicker #picker></mat-datepicker>

In TS:

onDateChange($event) {
    ...
    this.datePickerCfg.formControlDate.setValue(undefined);     // <<<---
}

By setting the input's formControl, which is bound to the datepicker, to undefined, the datepicker no longer holds the last selected value and the dateChange event is triggered.

Note: In this case it is possible to set the input formControl value to undefined, because it is hidden and I am placing the selected date to another control/field via the 'onDateChange()' function.

Angular Material datepicker for multiple input fields

1 Answers