Topic: DatePicker - multiple opening

Pandic_AT free asked 5 years ago


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>

Arkadiusz Idzikowski staff commented 5 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 5 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 5 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 5 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



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

  • 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