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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38569493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:41:04  来源:igfitidea点击:

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

jqueryangulartypescriptprimengprimeng-calendar

提问by Buzzer

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

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

HTML Part

HTML 部分

<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 ?

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

<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.

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

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

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

回答by rinukkusu

The PrimeNG calendarhas two events you can use: onBlurand onSelect.

PrimeNG日历有可以使用两个事件:onBluronSelect

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

所以你可能想改变你的代码来使用onBlur而不是blur

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

回答by gourab

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

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

回答by Simon_Weaver

Another approach can be to use getand setproperties to detect a change directly.

另一种方法可以是使用getset属性来直接检测更改。

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.

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