使用 PrimeNG 日历检测 [(ngmodel) 对所选日期的更改

Question

我有一个带有使用 PrimeNG 日历创建的附加日期选择器的输入元素。

HTML 部分

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

这里我使用了PrimeNG日历标签。我使用了一个隐藏的文本框，所以我可以选择更新的值，但它反映在文本框中。如何捕获任何事件的更新值？

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

当用户通过直接在输入元素中键入来更改日期时，我可以使用输入元素的模糊事件获取值，如上所示。但是当用户从日期选择器更改日期（即通过单击日历上的日期）时，不会调用模糊处理程序。

如何检测通过 datepicker 而不是在输入元素中键入对所选日期所做的更改？

Answer 1

PrimeNG calendar 有两个事件可供您使用：onBlur 和 onSelect。

所以您可能想更改代码以使用 onBlur 而不是 blur:

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

Answer 2

另一种方法是使用 get 和 set 属性直接检测变化。

private _startDate: Date;

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

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

无论您选择哪种方式，您都需要确保知道逻辑何时被触发 - 并且它不是运行不必要的。这种方式可能会变得很麻烦并且存在关注点分离问题，如果您必须因触发器而进行远程调用，则可能不建议这样做。

Answer 3

你可以使用 (ngModelChange)="yourMethod()".

使用 PrimeNG 日历检测 [(ngmodel) 对所选日期的更改

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

jquery

angular

typescript

primeng

primeng-calendar