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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
ES6的解构赋值实例详解
May 06 Javascript
使用layui的router来进行传参的实现方法
Sep 06 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python实现多线程端口扫描
2019/08/31 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
物业工作计划书
2014/01/10 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
小学美术教学反思
2014/02/01 职场文书
元旦晚会主持词
2014/03/24 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
商务信函英语问候语
2015/11/10 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技