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

    });

巴特西

angular6 使用daterangepicker的注意事项

最新文章

热门文章