ng2-daterangepicker - 以编程方式设置 startDate 和 endDate

Question

我希望有人可以帮助我。我试图弄清楚，但我没有找到任何办法。

我正在使用这个日期范围选择器：ng2-daterangepicker

我想在我的 component.ts 文件中以编程方式设置我的 ng2-daterangepicker 的值。

我找到了这个解决方案：Daterangepicker methods

但该解决方案仅适用于我，如果我的 component.html 文件中只有 1 个 daterangepicker。

我的问题是，我有 2 个 daterangepicker，我无法以编程方式设置另一个 daterangepicker 的值。

提前致谢！

我的密码：

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

你应该在模板中给他们不同的引用。

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

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

在组件中：

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

组件必须知道你引用的是哪个输入元素。

或者你可以尝试使用ViewChildren(DatePickerComponent) pickers，但我目前无法测试。

Answer 2

我通过解决方法解决了这个问题。我只为 daterangepicker 制作了一个子组件。我添加了代码示例。

@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>