Topic: Datepicker events issues
Hi. I have an issue with datepicker usage.
Expected behavior When clicking on the date in the datepicker modal I should be able to close/confirm/change date. Actual behavior Once I click the date in the modal no events are listened to anymore, I can't close the datepicker, confirm the choice, reselect, etc.
Resources (screenshots, code snippets etc.)
enter code here <div class="form-outline mb-3 datepicker" data-mdb-datepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="Input_date" />
<label for="Input_date" class="form-label">Data</label>
</div>
... then ...
content.querySelectorAll('.datepicker').forEach((date) => {
const options = {
datepicker: { format: 'dd-mm-yyyy' }
}
new Datepicker(date, options);
});
You are doing double init. First with a data attribute (data-mdb-datapicker-init) and the second one with new constructor. You need to choose one.
Verlino pro premium priority commented 4 weeks ago
Thanks for reply. Yes I know, I've tried all combinations to be sure but it still don't work. When I click on a date no events are listened to anymore; I can't clear, confirm, close modal with "X", close modal woth click outside, select other date... This is in version 9.0.0, I never had any problems with previous versions (eg. 8.2.0).
I've fixed your example: https://mdbootstrap.com/snippets/standard/kpienkowska/6419605
If you use it and still have problems, please write how you are doing your imports. I presume you are using UMD imports and copying from documentation examples meant for ES import.
Verlino pro premium priority commented 3 weeks ago
Hi. No, I still have problems unfortunately; I am using ES JavaScript import like:
import { Input, Datepicker, initMDB } from 'path..../mdb-ui-kit/js/mdb.es.min.js'; initMDB({ Input, Datepicker });
I am developing an Electron-vite desktop application. The strange thing is that with the previous versions I have no problem with the datepicker, in fact I have been using it for a long time. With the new version 9.0.0, however, the problem appeared.
Thank you for your support.
I tested this locally, and this code works. If you are using ES import, do not use mdb in the constructor. If this does not help, please let me know if you get any errors in the console.
import { Input, Datepicker, Ripple, initMDB } from "/js/mdb.es.min.js";
initMDB({ Input, Ripple, Datepicker });
document.querySelectorAll(".datepicker").forEach((date) => {
const options = {
format: "dd-mm-yyyy",
};
new Datepicker(date, options);
});
Verlino pro premium priority commented 2 weeks ago
It doesn't work for me and I don't get any errors in the console or terminal. I also wanted to try to manage a disposal of any previous instances, since I am in a modal that I open indefinitely with a button and dynamically generate the input inside... However, in addition to never having any remaining active instances, the listeners do not work anyway...
document.querySelectorAll(".datepicker").forEach((date) => { const oldInstance = Datepicker.getInstance(date); if (oldInstance) { oldInstance.dispose(); }
const options = { datepicker: { format: 'dd-mm-yyyy' } } new Datepicker(date, options); });
Kamila Pieńkowska staff commented 2 weeks ago
Was the only change an update of the MDB version, or did you also change some code?
Verlino pro premium priority commented a week ago
I think I have a problem with my code, because now I tried to downgrade the kit version and the problem persists where I didn't have it before with the same version. Thanks for the help!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: PC
- Browser: Chromium
- OS: Windows
- Provided sample code: No
- Provided link: No