Angular中多ng2-daterangepicker程序化设置日期问题求助

我明白你遇到的问题了——当页面上有多个ng2-daterangepicker实例时，直接用@ViewChild获取组件类型会只拿到第一个实例，导致没法操作第二个。别担心，我们只需要通过模板引用变量来区分不同的选择器实例就行，下面是具体的解决方案：

第一步：修改HTML模板，添加唯一的模板引用变量 #

首先给每个日期选择器的input标签加上专属的模板引用变量（比如#picker1和#picker2），同时把name属性改成不同的值避免表单冲突：

<div class="container">
  <button class="btn btn-primary" (click)="resetDate1()">Reset first</button>
  <input 
    type="text" 
    name="daterangeInput1" 
    #picker1 
    daterangepicker 
    [options]="options1" 
    (selected)="selectedDate($event)" 
  />
  <button class="btn btn-primary" (click)="resetDate2()">Reset second</button>
  <input 
    type="text" 
    name="daterangeInput2" 
    #picker2 
    daterangepicker 
    [options]="options2" 
    (selected)="selectedDate($event)" 
  />
  <button class="btn btn-primary" (click)="updateDateRange()">Reset both</button>
</div>

第二步：更新Component类，通过模板引用变量获取实例 #

修改@ViewChild的声明，指定对应的模板引用变量，这样就能精准拿到两个不同的picker实例，然后在方法中调用它们的API来设置日期：

import { Component, ViewChild } from '@angular/core';
import { DaterangePickerComponent } from 'ng2-daterangepicker';

export class AppComponent {
  // 通过模板引用变量获取对应的picker实例
  @ViewChild('picker1') private picker1: DaterangePickerComponent;
  @ViewChild('picker2') 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() {
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - 7); // 7天前
    const endDate = new Date(); // 今日
    
    this.picker1.setStartDate(startDate);
    this.picker1.setEndDate(endDate);
  }

  // 重置第二个日期选择器
  resetDate2() {
    const startDate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1); // 上月第一天
    const endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 0); // 上月最后一天
    
    this.picker2.setStartDate(startDate);
    this.picker2.setEndDate(endDate);
  }

  // 同时重置两个日期选择器
  updateDateRange() {
    this.resetDate1();
    this.resetDate2();
  }
}

关键说明 #

• 原来的@ViewChild(DaterangePickerComponent)会默认获取DOM中第一个匹配该组件的实例，所以你的两个picker1和picker2其实都指向了第一个日期选择器，导致第二个无法被操作。
• 使用模板引用变量后，@ViewChild('picker1')可以精准定位到对应的实例，这样就能分别控制两个选择器了。
• ng2-daterangepicker提供了setStartDate()、setEndDate()、setRange()等API来程序化修改日期，你可以根据需求选择合适的方法。

内容的提问来源于stack exchange，提问作者Adel