Angular6使用时间日期控件daterangepicker

页面展示效果图如下：

1.该插件需要引入jquery

npm install jquery --save

2.需要将以下三个文件放在assets文件夹下

3.在angular.json文件中添加如下配置

4.html

<input type="text" id="timeInput"  style="width:200px;height:28px;" />

5.ts

declare let $;
declare let moment;
...
...
...

ngOnInit() {
    this.dateRangePicker("timeInput");
}
dateRangePicker(id) {
    const locale = {
      "format": 'YYYY-MM-DD',
      "separator": " - ",
      "applyLabel": "确定",
      "cancelLabel": "取消",
      "fromLabel": "起始时间",
      "toLabel": "结束时间'",
      "customRangeLabel": "自定义",
      "weekLabel": "W",
      "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
      "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      "firstDay": 1
    };
    let picker: any = $('#' + id);
    let 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()
        
      };
    picker.daterangepicker(dataRageOption, function (start, end, label) {
      console.info(`start:${start.format('YYYY-MM-DD')}, end:${end}, label:${label}`);
    });

  }