Topic: DatePicker - multiple opening
Hello, I have a problem with the datepicker (Angular PRO).
I have one datepicker on the page (filtering in the table) and another in the modal window (creating a new item). Both have different IDs and different Name, but when I click on one of them, the input field is highlighted for both and the datepicker window opens for both. Does anyone have any idea how to solve this? Thanks for help
Datepicker code (on page):
<td *ngFor="let property of this.grid.properties; index as i">
....
<div *ngIf="property.type === 'datepicker'" class="md-form form-sm white-text">
<mdb-date-picker id="filter{{i}}" name="filter{{i}}" [options]="myDatePickerOptions" [label]="property.label" [(ngModel)]="property.value" (ngModelChange)="applyFilterOnData()"></mdb-date-picker>
</div>
....
</td>
Datepicker code (in modal):
<div class="md-form form-sm">
<mdb-date-picker mdbValidate id="newItemCommissioningDate" name="newItemCommissioningDate" #newItemCommissioningDate="ngModel"
[options]="myDatePickerOptions" label="Uvedení do provozu" [(ngModel)]="newItem.commissioningDate" required></mdb-date-picker>
<mdb-error *ngIf="newItemCommissioningDate.invalid && (newItemCommissioningDate.dirty || newItemCommissioningDate.touched)">
Vyplňte pole</mdb-error>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Unfortunately we couldn't reproduce this problem on our end. Do you use any custom options in
myDatePickerOptions? Is the second modal inside static or dynamic modal?If it's possible please prepare a simple demo on which we will be able to reproduce this problem and send it to a.idzikowski@mdbootstrap.com.
Pandic_AT free commented 4 years ago
After some research, I think the labels are causing the problem. When you set a label for a datapicker, it is always for "pickerInput", not for the "id" of that datapicker where it is located. This causes all datapickers to open when you click on the label.
Arkadiusz Idzikowski staff commented 4 years ago
Yeah, it looks like this is the cause of the problem. Thank you for the additional information, we will take a closer look at that and try to add a fix as soon as possible.
Pandic_AT free commented 4 years ago
Np, I solved it temporarily by adding @Input id in datapicker.component.ts and bind it to input and label in datapicker.component.html. :) Thanks for future fix