ng2-daterangepicker语言 - 以编程方式设置开始日期和结束日期

Question

我希望有人能帮助我。我试图弄清楚，但我找不到任何方法。

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

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

我找到了这个解决方案：日期范围选择器方法

但是如果我的组件文件中只有 1 个日期范围选择器.html则该解决方案仅适用于我。

我的问题是，我有 2 个日期范围选择器，但我无法以编程方式设置另一个日期范围选择器的值。

提前感谢！

我的代码：

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

我用解决方法解决了它。我只为日期范围选择器制作了一个子组件。我添加了代码示例。

@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

您应该在模板中为他们提供不同的引用。

<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 ，但我目前无法测试它。