以编程方式打开primeng日历

我正在使用带有Angular 4的PrimeNG组件，但是我遇到了一个问题 - 那就是当我的按钮被点击时如何显示日历？以编程方式打开primeng日历

链接https://plnkr.co/edit/lYbT8dfcFD5m62XpbmCG

@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（ '历'）的模板元素参考。我也尝试使用@ViewChild（'calendar＃inputfield'）应用焦点，但这不起作用。

所以是的 - 任何想法如何点击一个按钮以编程方式打开日历？

来源

2017-05-16 chris

您可以使用primeng日历

Modified Plunker

来源

2017-05-16 21:06:50 yurzui

showOverlay方法为何日历不显示，如果我评论的停止传播？ – chris

因为点击事件冒泡并且日历订阅了它https://github.com/primefaces/primeng/blob/v1.0.0-beta.20/components/calendar/calendar.ts#L260 – yurzui

在代码中的位置是日历链接到按钮？因为我有相同的问题，但在日历中有一个标签 –

以编程方式打开primeng日历

回答

相关问题