使用 PrimeNG 日历检测 [(ngmodel) 更改为选定日期答案

【问题标题】：Detect [(ngmodel) change to selected date with PrimeNG calendar使用 PrimeNG 日历检测 [(ngmodel) 更改为选定日期
【发布时间】：2016-11-28 21:33:42
【问题描述】：

我有一个使用 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 更改日期（即通过单击日历上的日期）时，不会调用模糊处理程序。

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

【问题讨论】：

标签： jquery angular typescript primeng primeng-calendar

【解决方案1】：

PrimeNG calendar 有两个可以使用的事件：onBlur 和 onSelect。

因此，您可能希望将代码更改为使用onBlur 而不是blur：

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

【讨论】：

【解决方案2】：

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

【讨论】：

嗨！如果您签出代码中的How to create a Minimal, Complete, and Verifiable example 以备将来在堆栈溢出时使用会更好。 -谢谢

【解决方案3】：

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

private _startDate: Date;

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

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

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

【讨论】：