angular中使用daterangepicker徹底能用版

angular版本：angular5

先看效果圖：

最新版是這樣的：

附上插件的網址：

http://www.daterangepicker.com/

1 安裝：

daterangepicker依賴於bootstrap,momont,jquery作成，因此你要導入這3個依賴。有兩種方法：

若是能npm安裝的話推薦第一種，直接在.angular-cli.json中添加這3個依賴的JS和CSS。

 1      "styles": [
 2         "./assets/bootstrap/css/bootstrap.css",
 3         "./assets/daterangepicker/daterangepicker.css",
 4         "css/styles.css"
 5       ],
 6       "scripts": [
 7         "./assets/jquery/jquery.slim.js",
 8         "./assets/popper.js/popper.js",
 9         "./assets/bootstrap/js/bootstrap.js",
10         "./assets/moment/moment.js",
11         "./assets/daterangepicker/daterangepicker.js",
12         "./assets/bootstrap-select/js/bootstrap-select.js"
13       ],

當你ng serve的時候會提示你安裝這3個依賴，直接在控制檯ng install bootstrap或者jquery或者daterangepicker或者momont就行。

安裝完再把JS和CSS導入到assets文件夾中。

若是不能npm安裝，請下載bootstrap，jquery，daterangepicker，momont的Zip文件，解壓後放到node_modules中。再把JS和CSS導入到assets文件夾中。

2.定義全局變量

typings.d.ts

1 declare var $: any;
2 declare var jQuery: any;

3.在代碼中引用

html

1 <input type="text" class="dropTimeCss" id="startEndTime"
2   name="startEndTime" placeholder="Start-End Time">

ts

 1 ngOnInit() {
 2     this.dateRangePicker();
 3 }
 4 
 5 dateRangePicker() {
 6     let picker: any = $('#startEndTime');
 7     let dataRageOption: Object = {
 8       'timePicker': true,
 9       'timePicker24Hour': true,
10       'drops': 'down',
11       'opens': 'left',
12       'locale': {
13         'format': 'YYYY-MM-DD HH:mm:ss',
14         'separator': ' -- ',
15         'applyLabel': 'Apply',
16         'cancelLabel': 'Cancel',
17         'fromLabel': 'From',
18         'toLabel': 'To',
19         'customRangeLabel': 'Custom',
20         'daysOfWeek': [
21           'Su',
22           'Mo',
23           'Tu',
24           'We',
25           'Th',
26           'Fr',
27           'Sa'
28         ],
29         'monthNames': [
30           'January',
31           'February',
32           'March',
33           'April',
34           'May',
35           'June',
36           'July',
37           'August',
38           'September',
39           'October',
40           'November',
41           'December'
42         ],
43         'firstDay': 1
44       },
45       'startDate': '2018-08-17 05:27:02',
46       'endDate': TimeUtil.formatDate(Date.now(), 'yyyy-MM-dd HH:mm:ss')
47     };
48     picker.daterangepicker(dataRageOption, function (start, end, label) {
49       console.log('start:${start.format(\'YYYY-MM-DD\')}, end:${end}, label:${label}');
50     });
51   }

刷新頁面，就可使用了。