ng2-daterangepicker - set startDate and endDate programatically

Question

i hope someone can help me. I Tried to figure it out, but i didn't find any way.

I am using this daterangepicker: ng2-daterangepicker

I would like to set the value of my ng2-daterangepicker programatically in my component.ts file.

I found this solution: Daterangepicker methods

but that solution works for me only, if i just have 1 daterangepicker in my component.html file.

My problem is, that i have 2 daterangepickers and I can't set the value of the other daterangepicker programatically.

Thanks in advance!

MY CODE:

app.component.html:

<div class="container">
    <button class="btn btn-primary" (click)="resetDate1()">Reset first</button>
    <input type="text" name="daterangeInput" daterangepicker [options]="options1" (selected)="selectedDate($event)" />

    <button class="btn btn-primary" (click)="resetDate2()">Reset second</button>
    <input type="text" name="daterangeInput" daterangepicker [options]="options2" (selected)="selectedDate($event)" />

    <button class="btn btn-primary" (click)="updateDateRange()">Reset both</button>
</div>

app.component.ts

export class AppComponent {

    @ViewChild(DaterangePickerComponent) private picker1: DaterangePickerComponent;
    @ViewChild(DaterangePickerComponent) private picker2: DaterangePickerComponent;

    public options1: any = {
        locale: { format: 'YYYY-MM-DD' },
        alwaysShowCalendars: false,
    };

    public options2: any = {
        locale: { format: 'YYYY-MM-DD' },
        alwaysShowCalendars: false,
    };

    public selectedDate(value: any) {
        console.log(value);
    }

    resetDate1() {
        this.picker1.datePicker.setStartDate('2018-03-25');
        this.picker1.datePicker.setEndDate('2018-03-25');
    }

    resetDate2() {
        this.picker2.datePicker.setStartDate('2018-03-25');
        this.picker2.datePicker.setEndDate('2018-03-25');
    }

    updateDateRange() {
        this.picker1.datePicker.setStartDate('2017-03-27');
        this.picker1.datePicker.setEndDate('2017-04-08');
        this.picker2.datePicker.setStartDate('2017-03-28');
        this.picker2.datePicker.setEndDate('2017-04-08');
    }
}

Answer 1

I solved it with a workaround. I made a child component only for the daterangepicker. I added the code example.

@Component({
  selector: 'app-daterangepicker',
  template: `
    <button class="btn btn-primary" (click)="resetDate()">Reset third</button>
    <input type="text" name="daterangeInput" daterangepicker [options]="options" (selected)="selectedDate($event)" />
  `,
})
export class DaterangepickerComponent implements OnInit {

  @ViewChild(DaterangePickerComponent) private picker: DaterangePickerComponent;

  public options: any = {
    locale: { format: 'YYYY-MM-DD' },
    alwaysShowCalendars: false,
};

  constructor() { }

  ngOnInit() {
  }

  public selectedDate(value: any) {
    console.log('in Component: '+value);
}

  resetDate() {
    this.picker.datePicker.setStartDate('2018-03-25');
    this.picker.datePicker.setEndDate('2018-03-25');
  }

}

<div class="container">
  <button class="btn btn-primary" (click)="resetDate1()">Reset first</button>
  <input type="text" name="daterangeInput" daterangepicker [options]="options1" (selected)="selectedDate($event)" />

  <button class="btn btn-primary" (click)="resetDate2()">Reset second</button>
  <input type="text" name="daterangeInput" daterangepicker [options]="options2" (selected)="selectedDate($event)" />
  
  <button class="btn btn-primary" (click)="updateDateRange()">Reset both</button>

  <app-daterangepicker></app-daterangepicker>
</div>

Answer 2

You should give them different references in template.

<input #datePicker1 type="text" name="daterangeInput" daterangepicker [options]="options1" (selected)="selectedDate($event)" />

<input #datePicker2 type="text" name="daterangeInput" daterangepicker [options]="options1" (selected)="selectedDate($event)" />

And in component:

    @ViewChild('datePicker1') private picker1: DaterangePickerComponent;
    @ViewChild('datePicker2') private picker2: DaterangePickerComponent;

Component has to know which input element you're referencing.

Or you could try using ViewChildren(DatePickerComponent) pickers, but I can't currently test it.