angular中使用daterangepicker完全能用版

angular版本：angular5

先看效果图：

最新版是这样的：

附上插件的网址：

http://www.daterangepicker.com/

1 安装：

daterangepicker依赖于bootstrap,momont,jquery做成，所以你要导入这3个依赖。有两种方法：

如果能npm安装的话推荐第一种，直接在.angular-cli.json中添加这3个依赖的JS和CSS。

      "styles": [
         "./assets/bootstrap/css/bootstrap.css",
         "./assets/daterangepicker/daterangepicker.css",
         "css/styles.css"
       ],
       "scripts": [
         "./assets/jquery/jquery.slim.js",
         "./assets/popper.js/popper.js",
         "./assets/bootstrap/js/bootstrap.js",
         "./assets/moment/moment.js",
         "./assets/daterangepicker/daterangepicker.js",
         "./assets/bootstrap-select/js/bootstrap-select.js"
       ],

当你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

 declare var $: any;
 declare var jQuery: any;

3.在代码中引用

html

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

ts

 ngOnInit() {
     this.dateRangePicker();
 }

 dateRangePicker() {
     let picker: any = $('#startEndTime');
     let dataRageOption: Object = {
       'timePicker': true,
       'timePicker24Hour': true,
       'drops': 'down',
       'opens': 'left',
       'locale': {
         'format': 'YYYY-MM-DD HH:mm:ss',
         'separator': ' -- ',
         'applyLabel': 'Apply',
         'cancelLabel': 'Cancel',
         'fromLabel': 'From',
         'toLabel': 'To',
         'customRangeLabel': 'Custom',
         'daysOfWeek': [
           'Su',
           'Mo',
           'Tu',
           'We',
           'Th',
           'Fr',
           'Sa'
         ],
         'monthNames': [
           'January',
           'February',
           'March',
           'April',
           'May',
           'June',
           'July',
           'August',
           'September',
           'October',
           'November',
           'December'
         ],
         'firstDay': 1
       },
       'startDate': '2018-08-17 05:27:02',
       'endDate': TimeUtil.formatDate(Date.now(), 'yyyy-MM-dd HH:mm:ss')
     };
     picker.daterangepicker(dataRageOption, function (start, end, label) {
       console.log('start:${start.format(\'YYYY-MM-DD\')}, end:${end}, label:${label}');
     });
   }

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