mdb-date-picker broken when you have multiple date pickers


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 enter image description here


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 :)


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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