Topic: Datepicker Using "datepicker-disable-future" Shows Double Backdrop (possible bug)

DiStefano premium asked 2 days ago


Encountered strange behavior when using Datepicker with disabling future date. This is somewhat difficult to explain but I will take a stab at it...

I'm using a modal to display a filter section in my app. In the modal containing my filter section, I have a Datepicker, which appears to work on a modal backdrop. I noticed, clicking the first modal to open my filter modal, I get the first natural out-of-the-box backdrop. But, when I click the Datepicker calendar, it opens that up perfectly fine, however, with another additional backdrop, making the backdrop darker. When I click anywhere inside the Datepicker modal to select a date, or even clicking in the open space of the modal, the secondary backdrop disappears, leaving the original backdrop there. But randomly renders clicking anywhere else on my filters modal to enter other filters, which are input boxes, I cannot click on anything, causing me to have to refresh the whole page to get it to go away.

After playing around for a few hours, I noticed the second backdrop on the Datepicker, is coming from the class of:

datepicker-disable-future

and the recommended Javascript...

const datepickerDisableFuture = document.querySelector('.datepicker-disable-future');
new mdb.Datepicker(datepickerDisableFuture, {
    disableFuture: true
});

When I removed the class: "datepicker-disable-future" and commented out the Javascript section, everything seemed fine with a single backdrop as expected. But, I need to disable future dates for what I am doing.

I have attached (2) screenshots, the first one showing the double backdrop and the second one is after clicking anywhere inside the Datepicker modal, which clears the top backdrop. You can clearly see from both screenshots, the color difference of the backdrops with one on top of the other. But, as stated, it does randomly causes my filters modal to be unresponsive.

I have also provided a snippet to show the double backdrop. I am unsure on what is triggering the second backdrop, but, definitely something from when adding the "datepicker-disable-future" class is the culprit.

Datepicker snippet

Thanks

screenshot001 screenshot002



It's not a problem with a doble backdrop. You initiated the component twice. So you have everything doubled.

You need to remove either data-mdb-datepicker-init or JS init.


DiStefano premium commented 1 day ago

That was it Kamila, thank you. Didn't realize that was the problem since I made the snippet from the example provided from: https://mdbootstrap.com/docs/standard/forms/datepicker/

Thanks



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 8.2.0
  • Device: Desktop
  • Browser: Chrome/Edge
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes