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');
    }
}

You should post some code you tried, without it it's impossible to help you. — Roberto Zvjerković, Mar 23 '18 at 10:50

score 2 · Accepted Answer · answered Mar 28 '18 at 17:46

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>

I used code of this example to reset date but without creating separate component for DaterangePikcer as it is not must to fix the issue in question. Thanks Adel you example really helped solving the issue. — Subhan Ahmed, Mar 26 '20 at 07:41
You can still post your solution :) I think every solution is a good help — Adel, Jun 10 '20 at 11:08

score 1 · Answer 2 · answered Mar 26 '18 at 05:46

1

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.

answered Mar 26 '18 at 05:46

Roberto Zvjerković

9,657
4
26
47

1

I already tried that, but it does not work. If i change `@ViewChild(DaterangePickerComponent)` to `@ViewChild('datePicker1')` nothing works anymore. I can't event set the first daterangepicker anymore. – Adel Mar 26 '18 at 05:50
Did you give them `#datePicker1` in template? If you did, can you reproduce your error on https://stackblitz.com/fork/angular – Roberto Zvjerković Mar 26 '18 at 07:09
Yes of course, i added `#datePicker1` to the first input and `#datePicker2` to the second input. I don't get any error messages. It just doesn't work. I will reproduce it tonight. I don't have so much time atm. – Adel Mar 26 '18 at 08:48

ng2-daterangepicker - set startDate and endDate programatically

2 Answers2