手动关闭P日历日期选择器

Question

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

这将显示带覆盖层的datePicker，从而阻止了网页的其余部分。 所有这些都很好。 除了选择日期和时间之后，关闭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>

Answer 2

将datepckerClick设置为true

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

Answer 3

抱歉，我的回答很晚，但是我已经看到您遇到的问题和我一样。 我只需要对p-multiselect做同样的事情。

我通过在click函数close()旁边添加$event.stopPropagation()来解决此问题。 下拉菜单未关闭，因为<p-footer>位于下拉菜单中，因此您必须从父click event排除它。 因此，通常是这样的：

的HTML

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

您的组件是这样的：

@ViewChild('myCalendar') datePicker;

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

希望这对某人有帮助！