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