Manually closing the p-calendar datepicker

user_4060062 0
Viewed 7111

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>
primeng angular javascript
3 Answers

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

Set datepckerClick to true

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

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!

user_56302880
Related