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

Question

我正在使用 PrimeNg

<p-calendar>

并拥有

[touchUI]="true"

和

[showTime]="true"

这会弹出一个日期选择器，其覆盖层遮挡了网页的其余部分。这一切都运行良好。除非选择日期和时间后，关闭 datePicker 并删除覆盖层的唯一方法是单击 datePicker 外部。我需要的是一个让用户单击关闭 datePicker 并删除覆盖的地方。

我有一个包含

<p-footer>

的按钮，我还可以使用

@ViewChild

装饰器来访问 overrideVisible 属性并手动将其设置为 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

做同样的事情。

我通过在点击功能

$event.stopPropagation()

旁边添加

close()

解决了这个问题。下拉列表未关闭，因为

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

希望这对某人有帮助！

Answer 4

对于 PrimeVue 用户，这里是简单的实现，如何使用

overlayVisible=false

（nuxt3 + ts + primevue）关闭日期选择器面板

1. 我们将脚本中的

   calendar

   引用与模板中的

   pv-calendar

   组件连接起来
2. 创建将

   overlayVisible

   的

   pv-calendar

   设置为

   false

的函数
3. 添加事件（或其他东西），监听然后触发函数
4. 当事件触发时，我们运行将

   overlayVisible

   值设置为

   false

   的函数（打开日期选择器面板时为

   true

   ）

<script lang="ts" script>
import { CalendarState } from "primevue/calendar";

// calendar reference (CalendarState interface for typescript)
const calendar = ref<CalendarState>({} as CalendarState); 

// function that sets overlayVisible variable to false
const hideCalendar = () => {
  if (!calendar.value) return;

  calendar.value.overlayVisible = false;
};
</script>

<template>

 <!-- Calendar Component -->
 <pv-calendar ref="calendar">

      <!-- Placing button in footer section of datepicker panel -->
      <template #footer>

        <!-- Button that has event of user click, and then fires hideCalendar function -->
        <pv-button @click="hideCalendar"> 
          Close datepicker
        </pv-button>

      </template>

    </pv-calendar>

</template>

Answer 5

不确定其他人是否仍在寻找这个问题，但这就是解决问题的方法。 我刚刚获得了对日历的引用，并循环遍历其

QueryList<Calendar>

并将

overlayVisible

设置为 false。 如果您 console.log 日历子项，您可以看到 QueryList 中的所有选项。 希望这对某人有帮助。

装饰者：

<p-calendar #calendar
  [(ngModel)]="date"
  [showIcon]="false"
  [touchUI]="true"
  dateFormat="MM yy"
  [readonlyInput]="true" 
  [showClear]="false"
  view="month" 
  appendTo="body"
  >
  <p-footer>
    <div class="buttonbar">
      <button class="cal-button" type="button" (click)="onTodayClick()">Now</button>
      <button class="cal-button" type="button" (click)="onDoneClick()">Done</button>
    </div>
  </p-footer>
</p-calendar>

成分：

@ViewChildren('calendar') calendar?: QueryList<Calendar>;

onDoneClick(): void {
    if (this.calendar) {
      this.calendar.forEach((calendar) => {
        calendar.overlayVisible = false;
      })
    }
  }