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

发布时间：2020-12-17 17:51:45 所属栏目：安全来源：网络整理

导读：我正在使用带有Angular 4的PrimeNG组件但是我遇到了一个问题 – 那就是当我点击我的按钮时如何显示日历？见Plunker @Component({selector: 'my-app',template: ` div h2Hello {{name}}/h2 button pButton type="button" (click)="openCalendar($event)" lab

我正在使用带有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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!