Angular Date Picker ignoreBackdropClick


Topic: Angular Date Picker ignoreBackdropClick

bitjuice pro asked 4 years ago

Hi,

it's possible to add an input property to mdb-date-picker, that prevent data picker modal to be closed when user click outside it? Sometihing like ignoreBackdropClick of mdbModal component

Thanks

Marco


Arkadiusz Idzikowski staff answered 4 years ago

Unfortunately, it's no possible and we currently don't have plans to adjust the component to such functionality. But here is a workaround that may help:

HTML:

<mdb-date-picker name="mydate" [placeholder]="'Selected date'" (inputFocusBlur)="onClick()" required></mdb-date-picker>

TS:

  constructor(private _renderer: Renderer2) {}

  onClick() {
    const backdrop = document.querySelector('.picker__holder');
    this._renderer.listen(backdrop, 'click', (event: any) => {
      event.stopPropagation();
    });
  }

bitjuice pro commented 4 years ago

Thanks a lot Arkadiusz


noveltytech pro premium priority commented 3 years ago

It does not work when [inline]="true". So, can you also provide the workaround for it?


Arkadiusz Idzikowski staff commented 3 years ago

@noveltytech I'm afraid there is no easy workaround for the inline mode. You would probably need to block the event propagation on the whole document/body instead of the backdrop element, but this is not an ideal solution because it can cause problems in other components.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No