gpt4 book ai didi

angular - 以编程方式打开 PrimeNG 日历

转载 作者:太空狗 更新时间:2023-10-29 17:43:50 36 4
gpt4 key购买 nike

我正在使用带 Angular 4 的 PrimeNG 组件,但我遇到了一个问题 - 即单击按钮时如何显示日历?

参见 Plunker

@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button pButton type="button" (click)="openCalendar($event)" label="Open Calendar"></button>
<br/><br/>
<p-calendar #calendar [(ngModel)]="value"></p-calendar>
</div>
`,
})
export class App {
name: string;
value: Date;

@ViewChild('calendar')
calendar: any;

constructor() {
this.name = `Angular! v${VERSION.full}`
}

openCalendar(event: any) {
console.log(event);
}
}

我尝试使用 @ViewChild('calendar') 获取模板元素引用。我也尝试过使用 @ViewChild('calendar#inputfield') 应用焦点,但这不起作用。

知道如何通过单击按钮以编程方式打开日历吗?

最佳答案

您可以在 primeng 日历上使用 showOverlay 方法

openCalendar(event: any) {
this.calendar.showOverlay(this.calendar.inputfieldViewChild.nativeElement);
event.stopPropagation();
}

Modified Plunker

关于angular - 以编程方式打开 PrimeNG 日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44011199/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com