angular中使用daterangepicker完全能用版

发布时间：2020-12-17 07:02:49 所属栏目：安全来源：网络整理

导读：angular版本：angular5 先看效果图：最新版是这样的：附上插件的网址： http://www.daterangepicker.com/ 1?安装： daterangepicker依赖于bootstrap,momont,jquery做成，所以你要导入这3个依赖。有两种方法：如果能npm安装的话推荐第一种，直接在.angular

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">

 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   }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!