search

danielmoncada / date-time-picker

Angular Date Time Picker (Responsive Design)
https://daniel-projects.firebaseapp.com/owlng/date-time-picker
MIT License
141 stars 61 forks source link

Pophover close when selecting date inside the pophover #40

Closed dhavalsolankislk closed 4 years ago

dhavalsolankislk commented 4 years ago

Hello, We are using ngbPopover as pop-box. And inside pop-box we put Date picker On click of date picker open date selection pop box then selection of date main popbox is close.

Here in popHover we have added properties [autoClose]="'outside'" Issue : On selection of date in date picker not close main popover box.

Capture4

Versions of ng-bootstrap ,Bootstrap and Angular Date Time Picker: "@danielmoncada/angular-datetime-picker": "^9.3.0" "@ng-bootstrap/ng-bootstrap": "^6.1.0" "bootstrap": "^4.4.1"

danielmoncada commented 4 years ago

Issue : On selection of date in date picker not close main popover box.

@dhavalsolankislk So, the issue here is when you select a date from the date/time picker, you want the popbox to close? Is this correct?

dhavalsolankislk commented 4 years ago

@danielmoncada

We don't want to close the popbox. In our case it is closing popbox.

danielmoncada commented 4 years ago

@dhavalsolankislk sounds like this might be an issue with the popup box itself. The reason why it's closing is because the date/time picker is a separate popup box / container. When you are clicking it, you are essentially 'leaving' the popup box, hence the closing. Does the popup box have some type of event you can override so that you can ignore the close if the clicked element is the date/time picker?

danielmoncada commented 4 years ago

@dhavalsolankislk looking at their documentation:

https://ng-bootstrap.github.io/#/components/popover/examples

You will need to set manual open/close. From there, have an event listener for your popup where if you click outside it AND if it's not the date/time picker, then you do a manual close.

There are many ways to determine whether you've clicked outside your div in the popup. Here's one: https://stackoverflow.com/questions/40107008/detect-click-outside-angular-component/59234391#59234391

danielmoncada commented 4 years ago

Closing as this is not an issue with the date/time control itself, but an issue on how it's used with the pop up control OP has integrated. I've provided a solution in the comments above.