以编程方式打开 PrimeNG 日历

Question

我正在使用 PrimeNG 组件 w/Angular4 但我运行遇到了一个问题 - 即当我的按钮被点击时如何显示日历？

@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

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

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

Modified Plunker

Answer 2

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

In an HTML template

       <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>

In a .ts Controller

   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();
    }
  }

以编程方式打开 PrimeNG 日历

Open PrimeNG calendar programmatically

primeng

angular

primeng-calendar