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