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.
Thanks
Kamila Pieńkowska
staff
answered 1 day ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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