使用PrimeNG日历检测[（ngmodel）更改为所选日期

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 (ie 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>

Answer 2

您可以使用(ngModelChange)="yourMethod()" 。

Answer 3

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.