Topic: Angular Date Picker ignoreBackdropClick

bitjuice pro asked 3 years ago


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



Arkadiusz Idzikowski staff answered 3 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:


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


  constructor(private _renderer: Renderer2) {}

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

bitjuice pro commented 3 years ago

Thanks a lot Arkadiusz

noveltytech priority commented 2 years ago

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

Arkadiusz Idzikowski staff commented 2 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.


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



Specification of the issue

  • ForumUser: 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