CODEWITHSUNDEEP
angulardatepicker
Felix
Felix

Reputation: 1810

Angular Material datepicker for multiple input fields

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?

Upvotes: 0

Views: 1435

Answers (1)

Felix
Felix

Reputation: 1810

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.

Upvotes: 0

Related Questions