Topic: mdb-date-picker broken when you have multiple date pickers
MDWebservices pro premium priority asked 5 years ago
There seems to be a major issue with your angular Data Pickers where you have duplicated ID's for the input and label for the mdb-date-picker component if there are miltiple on the same page. The means that when you click on the label of the second, third... it will only open the first date picker. We can see this is also the case on your website as all the ids are the same and there are several console warning on the page stating this. It looks like you have gotten around this by using placeholders instead.
Can you please confirm if there is or not a way of specifying a custom id to be used for input and label as this is currently breaking our platform?
Expected behavior
You should be able to have miltiple date pickers on a page with their own labels that select the correct input when a user clicks on them.
Actual behavior
When you click the label of the second, third etc date picker on the page, the first one is only sectioned and not the correct field.
Resources (screenshots, code snippets etc.) this page shows the error in the console https://mdbootstrap.com/docs/angular/forms/date-picker/ here is an image of the warning in the console of chrome
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.3.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 5 years ago
It should be fixed in v8.4.0. Did you try to upgrade your version?
From 8.4.0 it's possible to set custom id with
[id]
input.MDWebservices pro premium priority commented 5 years ago
Perfect that seems to have fixed the issue!! as it was reproducable on your site we thought it must not have been fixed yet!! Thanks for the quick come back and response :)