Angular Date Picker ignoreBackdropClick

Topic: Angular Date Picker ignoreBackdropClick

bitjuice pro asked 3 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

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

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

bitjuice

Pro User 472Support score
44Questions 25Answers 0Snippets