I am using PrimeNg <p-calendar> and have [touchUI]="true" and [showTime]="true"

This brings up a datePicker with an overlay blocking out the rest of the webpage. All this works fine. Except after a date and time are picked the only way to close the datePicker and remove the overlay is to click outside of the datePicker. What I need is a place for the user to click to close the datePicker and remove the overlay.

I have a button by including <p-footer> I was also able to use a @ViewChild decorator to access to the overlayVisible property and manually set it to false.

This does close the datePicker, but unfortunately it leaves the overlay blocking the entire page until it is refreshed.

I'm sure this is a simple fix, but it has me stumped.

In my component

@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>

I am using PrimeNg <p-calendar> and have [touchUI]="true" and [showTime]="true"

This brings up a datePicker with an overlay blocking out the rest of the webpage. All this works fine. Except after a date and time are picked the only way to close the datePicker and remove the overlay is to click outside of the datePicker. What I need is a place for the user to click to close the datePicker and remove the overlay.

I have a button by including <p-footer> I was also able to use a @ViewChild decorator to access to the overlayVisible property and manually set it to false.

This does close the datePicker, but unfortunately it leaves the overlay blocking the entire page until it is refreshed.

I'm sure this is a simple fix, but it has me stumped.

In my component

@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>

• javascript
• angular
• primeng

5 Answers 5

was facing the same issue and tried all the suggestions mentioned, but none worked for me. After hacking around, the following worked for me :)

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

Set datepckerClick to true

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

Sorry for my late answer, but I already saw that you had the same problem as I did. I only had to do the same thing with p-multiselect.

I solved this by adding $event.stopPropagation() next to the click function close(). The dropdown was not closing because <p-footer> is inside the dropdown, so you have to exclude from parent click event. So, in general, this is what it looks like:

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>

Your component as it is:

@ViewChild('myCalendar') datePicker;

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

Hope this helps someone!

For PrimeVue users, here is simple implementation, how to close datepicker panel with overlayVisible=false (nuxt3 + ts + primevue)

1. We connect calendar reference in script with pv-calendar component in template
2. Create function that sets overlayVisible of pv-calendar to false
3. Add event (or something else), to listen and then fire function
4. When the event fires, we run function that sets overlayVisible value to false (it is true when datepicker panel is opened

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

Not sure if others might still be looking for this, but this is how how solved it. I just got a ref to calendar and looped over its QueryList<Calendar> and set the overlayVisible to false. If you console.log the calendar child you can see all the options there in the QueryList. Hope this helps someone.

Decorator:

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

Component:

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

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