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

2
votes

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 ?

3
jqueryangulartypescriptprimengprimeng-calendar

3 Answers

6
votes

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>
3
votes

you can use (ngModelChange)="yourMethod()".

1
votes

Another approach can be to use get and set properties to detect a change directly. 

private _startDate: Date;

set startDate(date: Date)
{
    this._startDate = date;
    alert('changed');
}

get startDate(): Date
{
    return this._startDate;
}

Whichever way you choose you'll need to make sure you know when the logic is being triggered - and that it isn't being ran unnecessarily. This way may get cumbersome and have separation of concern issues and is probably not advisable if you have to make a remote call as a result of the trigger.