p-calendar angular 6 事件 onClick 不触发（和其他事件）

Question

我想在打开组件时调用一个方法，所以我测试了一些方法，没有人工作只是 (onSelect) 事件工作。这是代码的一部分：

<p-calendar id="idCalendarDateExportFrom" [showIcon]="true" [(ngModel)]="dateChoosenProd" readonlyInput="true" [showTime]="true" dateFormat="dd/mm/yy" [locale]="fr"  
(onClick)="moveDate(1)" (onSelect)="moveDate(0)">
</p-calendar>

在 ts 文件中：

public moveDate(position: Number){
        if(position === 1){
            this.marginTop = "400px";
        } else {
            this.marginTop = "0px";
        }
}

我也尝试过不使用大写字母的 onclick、onmouseover、...

我用Angular6

Answer 1

查看 primefaces calendar docs

中的事件 table

例如：

onShow event: Animation event Callback to invoke when datepicker panel is visible.

或

onSelect value: Selected value Callback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually.

见Stackblitz

Answer 2

calendar PrimeNG 组件 uses 一个 input 标签来显示日期输入框。所以理论上，您可以绑定到它的鼠标事件。以下部分按要求工作。但是由于某些原因，在触发onSelect事件的时候又触发了onmousedown事件

<p-calendar [(ngModel)]="value" [locale]="en" (mousedown)="moveDate(1)" (onSelect)="moveDate(0)"></p-calendar>

工作示例：Stackblitz

Answer 3

<p-calendar 
  [(ngModel)]="testDate" 
  (onSelect)="selectDate()" 
  (onBlur)="blurDate()">
</p-calendar>

如果我在与 [(ngModel)] 相同的输入上同时使用 onBlur 和 onSelect 他们 both 在从日历中选择日期后被调用，但是 ngModel 中的 onBlur 变量未定义！在 onSelect 内，同一变量选择了日期。一些可能对此有好处。

但是正如文档所说，如果您手动输入值，则不会调用 onSelect，然后只会调用 onBlur - 但 ngModel 中的变量会更新为选择的值!

此外，当您输入值并按 Enter（至少在我的环境中）时，onSelect 或 onBlur 都不会被调用，直到用户单击外部元素和松散的输入焦点。

可能的解决方案：

使用AngularFormGroup

HTML 模板

<p-calendar formControlName="testDate"></p-calendar>

JS

ngOnInit() {
    this.form = this.formBuilder.group({
        testDate:   [new Date(Date.now())],
    });

    this.form.valueChanges.subscribe(formData => {
        console.log('Picked date:', formData.testDate);
        // expected output - picked date as Date.prototype
    });
}

这在以下情况下有效：

从日历弹出窗口中选择日期
手动更改值（同样，一些可能有用）

p-calendar angular 6 事件 onClick 不触发（和其他事件）

p-calendar angular 6 event onClick doesnt fire (and others events)

primeng

angular