daterangepicker时间段插件
1.序言:
daterangepicker是Bootstrap的一个时间组件,使用很方便
用于选择日期范围的JavaScript组件。 设计用于Bootstrap CSS框架。
它最初是为了改善报表而创建的，它可以连接到任何网页元素，弹出两个日历，用于选择日期、时间或从预定义的范围，如“最后30天”。
2.需要的js和css:
bootstrap.min.css
daterangepicker.css
jquery.js
bootstrap.min.js
moment.js
daterangepicker.js
3.配置详解参考网址:
配置详解(不太全,但够了):https://www.cnblogs.com/leijing0607/p/7698414.html
配置详解(配合上面一起看):http://blog.csdn.net/Webben/article/details/78319276
问题已经小BUG修复(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html
4.小dome
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
</head>
<body>
<form class="form-inline">
<div id="divDateId" class="pull-left dateRange">
<input class="form-control" id="searchDate"></input>
<!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
</div>
</form>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="moment.min.js" ></script>
<script type="text/javascript" src="daterangepicker.js" ></script>
<script type="text/javascript">
//初始化原始页面 默认30天
$('#divDateId input').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
$('#divDateId').daterangepicker({
minDate: '01/01/2015', //最小时间
maxDate : moment(), //最大时间
dateLimit : {
days : 365*5
}, //起止时间的最大间隔
showDropdowns : true,
showWeekNumbers : false, //是否显示第几周
timePicker : false, //是否显示小时和分钟
timePickerIncrement : 60, //时间的增量，单位为分钟
timePicker12Hour : false, //是否使用12小时制来显示时间
ranges : {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()]
},
opens : 'right', //日期选择框的弹出位置
buttonClasses : [ 'btn btn-default' ],
applyClass : 'btn-small btn-primary blue',
cancelClass : 'btn-small',
format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
separator : ' to ',
locale : {
applyLabel : '确定',
cancelLabel : '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay : 1
} //汉化日期控件
}, function(start, end, label) {
//格式化日期显示框 点击后的操作
$('#searchDate').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});
</script>
</html>
5.扩展 在angular项目中使用 input的ng-model 双向数据绑定 $watch 监视
1只用多引一个angular-daterangerpicker.js 的插件
案例地址 https://github.com/var-chx/angular-daterangepicker.git
daterangepicker时间段插件的更多相关文章
- daterangepicker双日历插件的使用
今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下: 个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文 ...
- daterangepicker 时间插件
在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="repo ...
- daterangepicker日历插件使用参数注意问题
显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在locale中,网上很多资料说直接写在datera ...
- 关于daterangepicker取消默认值的设置
1.项目中用到了daterangepicker这个插件,需求要求不能有默认值. 2.查资料得知,可以修改插件内的属性 autoUpdateInput值来实现这个效果. 顾虑有二: 1.修改插件内容,导 ...
- js 插件 issue
1 iscroll 5 和 lazyload 同时使用 转自 yinjie //lazyload var $scrollEle = $("#wrapper") $("i ...
- 各种Js插件汇总；JavaScript插件
1.jquery信息提示插件: https://blog.csdn.net/u013517229/article/details/78291841 http://www.jqueryfuns.com/ ...
- jquery-ui-datepicker定制化，汉化，因手机布局美观化源码修改
感谢浏览,欢迎交流=.= 公司微信网页需要使用日历控件,想到jquery-mobile,但是css影响页面布局,放弃后使用jquery-ui-datepicker. 话不多说,进入正题: 1.jque ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
随机推荐
- BUAA OO 2019 第二单元作业总结
目录 总 架构 controller model view 优化算法 Look 算法 多种算法取优 预测未来 多线程 第五次作业 第六次作业 第七次作业 代码静态分析 UML 类图 类复杂度 类总代码 ...
- 免费申请 WebStorm 使用许可 - free JetBrains Open Source license(s)
闲聊 步入前端切图仔行列的我曾多次纠结过「到底使用哪种编辑器写前端好用?」这样的问题,前前后后尝试过 Dreamweaver .HBuilder .Sublime Text .Atom 和现在主要使用 ...
- JS-面向对象相关
onload 初始化 类似 构造函数初始化对象 全局变量 -> 属性 函数 -> 方法 面向对象中最重要的就是 this的理解 this报错的原因 定时器的使用 function ...
- #leetcode刷题之路21-合并两个有序链表
将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例:输入:1->2->4, 1->3->4输出:1->1->2-&g ...
- 用JavaScript获取URL参数的方法之一
若地址栏URL为:abc.html?m=tomms&c=allsearchlist&pageNo=1&pageNum=20&text=1 <script> ...
- 控制台打印九九乘法表（for循环的使用）
控制台输出九九乘法表 for(int i=1;i<=9;i++){ for(int j = 1; j <= i; j ++) { System.out.print(j+"*&qu ...
- Error evaluating expression ''xxx''. Cause: org.apache.ibatis.ognl.NoSuchPropertyException:
1.检查实体类相应的字段名以及set,get方法(仔仔细细看) 2.检查mapper.xml取值字段 3.注意实体类中isDelete等类似 isXxx的字段 set get方法会变成GetDelet ...
- Delphi写的DLL，OCX中多线程一个同步问题
Delphi写的DLL,OCX中如果使用了TThread.Synchronze(Proc),可能导致线程死锁,原因是无法唤醒EXE中主线程, Synchronze并不会进入EXE主线程消息队列. 下面 ...
- hadoop排序 -- 全排序
目录 一.关于Reducer全排序 1.1. 什么叫全排序 1.2. 分区的标准是什么 二.全排序的三种方式 2.1. 一个Reducer 2.2. 自定义分区函数 2.3. 采样 一.关于Reduc ...
- sublime install package没反应，以及安装后没有出现install package选项
离线安装Package Control 一般出现这种问题的是网络原因,我们可以下载离线安装包 连接地址:https://github.com/wbond/package_control 安装完成后解压 ...