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}');
});
}
刷新页面,就可以使用了。
angular中使用daterangepicker完全能用版的更多相关文章
- Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
- angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
- angular源码分析:angular中$rootscope的实现——scope的一生
在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...
- angular中自定义依赖注入的方法和decorator修饰
自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...
随机推荐
- 【linux高级程序设计】(第九章)进程间通信-管道 2
文件描述符重定向 cat<test01 :将输入重定向到test01文件 cat>test02<test01 :将标准正确输出重定向到test02文件,输入设备重定向到test0 ...
- python接口自动化7-参数关联【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...
- Matlab与C++混合编程,添加OpenCV库
最近在做运动医学软件优化工作,此款软件框架及算法语言全由matlab实现,虽然matlab矩阵运算.数值计算能力强大,但速度让人难以忍受.软件立刻移植到C++上又不太实际,故采用联合编程的方式,速度难 ...
- 谷歌浏览器cookies管理插件:EditThisCookie
目前大多数网站的登录程序或者是其他保存用户信息到本地浏览器的方式都是使用cookies的方式,而cookies虽然可以为用户的一些操作带来便捷,比如可以记住用户的密码或者用户的选择历史,在下一次操作的 ...
- 洛谷——P1029 最大公约数和最小公倍数问题
P1029 最大公约数和最小公倍数问题 题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1 ...
- C++大数板子
C++大数板子 使用样例在主函数里看就好,必要的运算符都重载了. #include <iostream> using namespace std; ;/*精度位数,自行调整*/ //1.如 ...
- JsonConfig处理日期时间
写在前面: 页面发送ajax请求到后台,后台返回对应的json格式数据给前台页面进行数据展示,如果json数据中含有日期时间,就需要对日期进行处理 下面是相关的代码部分 JsonConfig json ...
- 在Spring MVC Controller中注入HttpServletRequest对象会不会造成线程安全的问题
做法: 1.比如我们在Controller的方法中,通常是直接将HttpServletRequest做为参数,而为了方便节省代码,通常会定义为全局变量,然后使用@Autowire注入. 说明: 1.观 ...
- 在SQL Server中查看对象依赖关系
原文 在SQL Server中查看对象依赖关系 Viewing object dependencies in SQL Server Deleting or changing objects may ...
- ubuntu10.10编译TQ2440的x86-qtopia-2.2.0具体问题总结及原因分析
转: http://blog.csdn.net/zyxlinux888/article/details/6705481 http://www.cnblogs.com/liu_xf/archive/20 ...