Question

PrimeNg提供了非常好的日历组件，该组件确实工作正常，但是在选择2个日期之后是否有办法将其关闭？

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"></p-calendar>

在documentation中，我注意到了两个有趣的事情： -事件onSelect，不幸的是，它将在常规日历上正常工作，我们需要按一下（在这里我们需要按两次） -属性：hideOnDateTimeSelect，但似乎不是我想要的，因为它也不起作用。

我想我可以做些类似的事情：

<p-calendar [(ngModel)]="rangeDates" 
            selectionMode="range"
            [readonlyInput]="true"
            (onSelect)="onSelect()"></p-calendar>

private dateSelected() {
    if (this.rangeDates[0] !== null && this.rangeDates[1] !== null) {
    //really dont know how to do "close" right now.
    }
}

Answer 1

以下内容对我有用：

<p-calendar [(ngModel)]="rangeDates" 
    selectionMode="range" #calendar
    [readonlyInput]="true"
    (onSelect)="onSelect()"></p-calendar>

@ViewChild('calendar', undefined) private calendar: any;
private onSelect(){
  if (this.rangeDates[1]) { // If second date is selected
    this.calendar.overlayVisible=false;
}
 }

我知道回答您的问题为时已晚，但是对于像我这样试图找到答案的人仍然可以回答。

选择两个日期后关闭日期范围日历组件

1 个答案: