Detect [(ngmodel) change to selected date with PrimeNG calendar

Question

I have an input element with an attached datepicker created using PrimeNG calendar.

HTML Part

<p-calendar showAnim="slideDown" 
            id="calendar" 
            [showIcon]="true 
            [(ngModel)]="myDate" 
            (blur)="onBlurMethod($event)">
</p-calendar>

Here I have used PrimeNG calendar tag. I have used one hidden text box so I can pick the updated value but it is reflecting in the text box. How can I capture the updated value on any event ?

<input type="hidden" id = "datePickerText" [ngModel]="myDate">

When the user changes the date by typing directly into the input element, I can get the value with the input element's blur event, as shown above. But when the user changes the date from datepicker (i.e. by clicking a date on the calendar), the blur handler is not called.

How can I detect changes to the selected date that are made via the datepicker, rather than by typing into the input element ?

Answer 1

The PrimeNG calendar has two events you can use: onBlur and onSelect.

So you probably want to change your code to use onBlur instead of blur:

<p-calendar showAnim="slideDown" 
            id="calendar" 
            [showIcon]="true"
            [(ngModel)]="myDate" 
            (onBlur)="onBlurMethod($event)">
</p-calendar>