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

Question

我正在使用带有 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')但这不起作用。

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

Answer 1

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

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

修改后的 Plunker

Answer 2

以下代码适用于最新版本的primeng（发布时）

在 HTML 模板中

       <button pButton type="button" (click)="openCalendar($event)" label="Open Calendar"></button>
       <p-calendar
          #calendar
          [(ngModel)]="selectedDate"
          [readonlyInput]="true"
          (onSelect)="onSelectCal()"
          (onClose)="isEdit = false"
          appendTo="body"
        ></p-calendar>

在 .ts 控制器中

   import { Calendar } from "primeng/primeng";

   @ViewChild("calendar", { static: false }) private calendar: Calendar;

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

Answer 3

版本13更新，ivy表示调用子程序不会更新组件状态，必须强制ivy更新。

我需要能够在创建时打开，所以我在日历包装组件中添加了一个变量。在我的情况下，创建日历有延迟，所以我不得不在那里暂停......

  @Input()
  open = false;

  ngOnInit() {
    setTimeout(() => {
      if (this.open) {
        this.calendar.showOverlay();
        this.calendar.cd.detectChanges();
      }
    }, 10);
  }

  showDate() {
    if (!this.calendar.overlayVisible) {
      this.calendar.showOverlay();
      this.calendar.cd.detectChanges();
    }
  }