頁面展示效果圖如下：

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

  }