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

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

我知道现在回答你的问题已经很晚了，但还是为像我这样正在努力寻找答案的人回答了这个问题。

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

Close date range calendar component after choosing two dates

angular

calendar

frontend

primeng

date-range