0

I want to open my ngx-daterangepicker-material by clicking out side of any button/icon. i know ngx-daterangepicker-material provide the facility by using

@ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective.
....
openDatepicker() {
   
    this.pickerDirective.open();
  }

But my problem is not resolved with above code as I have a multiple date range picker in my form. When i tried with the above code .it will open the date range picker but the value is set only on first date range picker. not on particular date range which I clicked.

Any help will be appreciate

enter image description here

subhash .net cool
  • 45
  • 10
  • add template variable (like #myfirstdaterangepicker) at your datepicker tag in html. and use it multiple viewChild @ViewChild('myfirstdaterangepicker', {.. then call open method on whatever datepicker you want to open. – harpal Feb 11 '22 at 10:20
  • Thanks @HPSingh for reply but my form is dynamic i have only on date range picker in html and in runtime I called my template in for each loop if i add this #myfirstdaterangepicker it will be render multiple time with same template id – subhash .net cool Feb 11 '22 at 10:42
  • I'm not sure, but you can try to send the #daterangepickerreference to openDatepicker(daterangepickerreference: DaterangepickerDirective) method, when you are clicking and calling openDatepicker method. – harpal Feb 11 '22 at 10:49
  • I prepared the same, and looks like it would work https://stackblitz.com/edit/angular-hvcnpx – harpal Feb 11 '22 at 10:56
  • Thanks again but above exmple is simple in my case you cannot apply and open the date range picker in same event like openDatepicker(inputRef) { this.pickerDirective.open(); inputRef.value = this.pickerDirective.value; } date_range – subhash .net cool Feb 11 '22 at 11:13

1 Answers1

0

Instead of using ViewChild you can use ViewChildren Something like @ViewChildren(DaterangepickerDirective) pickerDirectiveAll: Query Then in your (click)="openDatepicker(datePiker) you need to loop through pickerDirectiveAll and finds your specific item.

  • find item (in think its working if u compare by this.pickerDirectiveAll[i].viewContainerRef == datePiker) then open: this.pickerDirectiveAll[i].open();

But it's not so elegant solution...

Bogdan Olaru
  • 1