Question

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

我正在使用此daterangepicker：ng2-daterangepicker

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

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

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

我的问题是，我有2个daterangepickers，我无法以编程方式设置其他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创建了一个子组件。我添加了代码示例。

OBJS:=$(notdir $(SRCS:.c=.o))

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

Answer 3

试试吧

@ViewChild(DaterangePickerComponent)
private picker1: DaterangePickerComponent;
@ViewChild(DaterangePickerComponent)
private picker2: DaterangePickerComponent;
public updateDateRange() {
    this.picker1.datePicker.setStartDate('2017-03-27');
    this.picker1.datePicker.setEndDate('2017-04-08');
    this.picker2.datePicker.setStartDate('2017-03-27');
    this.picker2.datePicker.setEndDate('2017-04-08');
}

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

3 个答案: