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   }

刷新页面，就可以使用了。

转载于:https://www.cnblogs.com/forbetter223/p/10309294.html