手动关闭 p-calendar datepicker

Question

我使用PrimeNg <p-calendar>，并有[touchUI]="true"和[showTime]="true"

这将打开一个带有覆盖网页其余部分的日期选择器。所有这些工作正常。除了选择日期和时间之后，关闭 datePicker 并移除覆盖层的唯一方法是在 datePicker 外部单击。我需要的是一个供用户单击以关闭 datePicker 并删除覆盖层的地方。

我有一个按钮，包括<p-footer>我还可以使用@ViewChild装饰器访问 overlayVisible 属性并手动将其设置为 false。

这确实关闭了 datePicker，但不幸的是它会使覆盖物阻塞整个页面，直到它被刷新。

我确定这是一个简单的修复，但它让我难倒。

在我的组件中

@ViewChild('myCalendar') datePicker;

close() {
  this.datePicker.overlayVisible = false;
}

html

<p-calendar #myCalendar
  formControlName="tsClockIn"
  [showIcon]="true"
  [touchUI]="true"
  [showTime]="true">
  <p-footer>
    <button pButton type="button" label="Close" (click)="close()"></button>
  </p-footer>
</p-calendar>

Answer 1

面临同样的问题并尝试了所有提到的建议，但没有一个对我有用。黑客攻击后，以下对我有用:)

        <p-calendar monthNavigator="true" showTime="true"
                    [minDate]="minDate"
                    [readonlyInput]="true"
                    [showIcon]="true"
                    formControlName="departDate"
                    touchUI=true
                    #calendar
                    required>
            <p-footer>
                <button pButton type="button" label="Close" 
                   (click)="calendar.hideOverlay()">
                </button>
            </p-footer>
        </p-calendar>