angular6 使用daterangepicker的注意事项

具体使用方法可参考这篇博客：https://blog.csdn.net/qq_43225030/article/details/84973086

需要注意的地方是，在dateRangePicker函数，我们不单单是要打印所选择的起始时间和结束时间。

dateRangePicker(id: string) {
    const locale = {
      'format': 'YYYY-MM-DD',
      'separator': ' - ',
      'applyLabel': '确定',
      'cancelLabel': '取消',
      'fromLabel': '起始时间',
      'toLabel': '结束时间',
      'customRangeLabel': '自定义',
      'weekLabel': 'W',
      'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],
      'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      'firstDay': 1
    };
    const picker: any = $('#' + id);
    const dataRageOption: Object = {
      'locale': locale,
      ranges: {
        '今日': [moment(), moment()],
        '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        '最近7日': [moment().subtract(6, 'days'), moment()],
        '最近30日': [moment().subtract(29, 'days'), moment()],
        '本月': [moment().startOf('month'), moment().endOf('month')],
        '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      startDate: moment().subtract(6, 'days'),
      endDate: moment(),
      dateLimit: {
        days: 30
      }
    };
   
    picker.daterangepicker(dataRageOption, function (start: any, end: any, label: any) {
      console.info(`start:${start.format('YYYY-MM-DD')}, end:${end}, label:${label}`);
    });
  }

1、一种情况，需要将start和end赋值给类的对象的属性，假设有两个属性this.startTime和this.endTime，如果直接在picker.daterangepicker的回调函数中赋值，如：

this.startTime = start
this.endTime = end
将会报错，因为在回调函数里this是DateRangePicker的对象，

   所以，可以在dateRangePicker函数里提前定义一个变量，将类的对象this赋值给它，在回调函数中利用新定义的变量接收start和end，如下：

const obj: any = this;
picker.daterangepicker(dataRageOption, function (start: any, end: any, label: any) {
    obj.startTime = start;
    obj.endTime = end;
});

 

2、另一种情况是，在页面上选择了起始时间后，需要做url跳转，可以这样：

    const router1 = this.router;    // this.router的类型是Router

 const route1 = this.route; // this.route的类型是ActivatedRoute

 picker.daterangepicker(dataRageOption, function (start: any, end: any, label: any) { router1.navigate(['./'], {relativeTo: route1, queryParams: { start: start, end: end }}); });