0

I struggle to open ngxDaterangepickerMd from outside. I need two single-datepickers, one for the "from date" and one for the "to date". When I click on the from-button the from-datepicker should open and when I click on the to-button the to-datepicker should show up. Yet in my case when I click on the to-datepicker, the from-datepicker opens instead.

This is the code for my from-button:

 <input type="text" class="datepicker-calendar-icon"  ngxDaterangepickerMd  [locale]="{ format: 'DD/MM/YYYY' }" [(ngModel)]="startDate" [singleDatePicker]="true"
                        [autoApply]="true" [minDate]="minDate" (change)="setStartDate()" />
<button>from</button>

This is the code for my to-button:

 <input type="text" class="datepicker-calendar-icon"  ngxDaterangepickerMd  [locale]="{ format: 'DD/MM/YYYY' }" [(ngModel)]="endDate" [singleDatePicker]="true"
                        [autoApply]="true" [minDate]="minDate" (change)="setStartDate()" />
<button>to</button>

I followed this as reference https://github.com/fetrarij/ngx-daterangepicker-material#open-datepicker-from-outside

Do you have any idea how I can solve this problem?

kellermat
  • 2,859
  • 2
  • 4
  • 21
uday
  • 1
  • 1
  • You see they use `ViewChild` to get the current input (datepicker), ViewChild just like `querySelector` return `1` element, the first one. Since you have 2 inputs, you need to use `ViewChildren`. So you can start learning to use those 2 decorators that Angular provides. If you have any stuck, just post here, we can work together. https://angular.io/api/core/ViewChildren – Jimmy Dec 18 '22 at 10:27

0 Answers0