BootStrap daterangepicker 双日历控件


Posted in Javascript onJune 02, 2017

bootstrap-daterangepicker点击下载

需要bootstrap跟jquery的支持。

实例代码:

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
 <link rel="stylesheet" type="text/css" media="all" href="daterangepicker/daterangepicker.css" rel="external nofollow" /> 
 </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 type="text/javascript" src="jquery/1.12.4/jquery.min.js" ></script> 
 <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script> 
 <script type="text/javascript" src="daterangepicker/moment.min.js" ></script> 
 <script type="text/javascript" src="daterangepicker/daterangepicker.js" ></script> 
 <script type="text/javascript"> 
 //默认三十天 
 $('#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>

实例图片:

BootStrap daterangepicker 双日历控件

参数说明:

`startDate`: (Date object, moment object or string) 起始时间
`endDate`: (Date object, moment object or string) 结束时间
`minDate`: (Date object, moment object or string) 可选最早时间
`maxDate`: (Date object, moment object or string) 可选最迟时间
`timePicker`: (boolean) 是否显示time选择
`timePickerIncrement`: (number) time选择递增数
`timePicker12Hour`: (boolean) 是否12小时制
`opens`: (string: 'left'/'right') 显示在元素左边还是右边
`buttonClasses`: (array) 按钮样式
`applyClass`: (string) 应用按钮样式
`cancelClass`: (string) 取消按钮样式
`format`: (string) date/time格式
`separator`: (string) 分隔符
`locale`: (object) 本地设置
`singleDatePicker`: (boolean) 是否是单个时间选择器
`parentEl`: (string) 将控件放到哪个元素内,默认body

其中有一个小需求调整,当我们直接使用源码选择时,为啦方便用户操作,控件在下拉选择月份时,自动帮我们刷新啦另一个控件上的日期,两个日期相差都在一个月,比如我选择1月到6月时,两个日期面板上显示不上一个1月,一个六月,如图:

BootStrap daterangepicker 双日历控件

如果不需要这种变化,可以修改daterangepicker.js的代码:

注释1444行跟1445行,1448跟1449行,不让它自动去改变日期面板:

BootStrap daterangepicker 双日历控件

在注释掉582行:

BootStrap daterangepicker 双日历控件

这样就能达到改变日期不改变面板的效果啦:

BootStrap daterangepicker 双日历控件

以上所示是小编给大家介绍的BootStrap daterangepicker 双日历控件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
js实现二级导航功能
Mar 03 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
javascript实现延时显示提示框效果
Jun 01 #Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
vue.js 获取当前自定义属性值
Jun 01 #Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 #Javascript
vue快捷键与基础指令详解
Jun 01 #Javascript
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php时区转换转换函数
2014/01/07 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
axios学习教程全攻略
2017/03/26 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
js 实现在2d平面上画8的方法
2018/10/10 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Python完全新手教程
2007/02/08 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python实现简单购物商城
2016/05/21 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Django如何配置mysql数据库
2018/05/04 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python time()的实例用法
2020/11/03 Python
经营管理策划方案
2014/05/22 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers