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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
p5.js实现动态图形临摹
Oct 23 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
详解Vue源码之数据的代理访问
2018/12/11 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JS如何生成动态列表
2020/09/22 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python3 合并二叉树的实现
2019/09/30 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
django从后台返回html代码的实例
2020/03/11 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
期中考试后的反思
2014/02/08 职场文书
水电工岗位职责
2014/02/12 职场文书
个人贷款承诺书
2014/03/28 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书