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   }

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