How to call a method on both (click) and (input) events

I’m making a datepicker (range type) and I’m writing the logic for date validation for the same. I’m using primeng calendar.

Here is the stackblitz for the same.

timeline.component.html

<span class="master-wrapper">
    <p-calendar 
      (input)="validateDateRange($event)"
      (click)="validateDateRange($event)"
      [(ngModel)]="value" 
      name="test"
      selectionMode="range">
    </p-calendar>
</span>

timeline.component.ts

validateDateRange(event) {
    console.log("validateDateRange called");        
   
    const dateRange = event.srcElement.value.split(' - ');
    console.log("here ", dateRange);

    let startDate=dateRange[0];
    let endDate=dateRange[1];

    // validation logic
    ...
}

Keyboard input event is working perfectly fine but the click event is giving me this error:

enter image description here

Please point out my mistake here.

77 thoughts on “How to call a method on both (click) and (input) events”

Leave a Comment