脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap daterangepicker

BootStrap daterangepicker 双日历控件

 更新时间：2017年06月02日 08:54:42   作者：小爷胡汉三  
这篇文章主要介绍了BootStrap daterangepicker 双日历控件,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下

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>

实例图片：

参数说明：

`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月，一个六月，如图：

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

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

在注释掉582行：

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

点击下载项目源码

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

您可能感兴趣的文章:

相关文章

  • 微信小程序实现九宫格翻牌动画

    微信小程序实现九宫格翻牌动画

    这篇文章主要为大家详细介绍了微信小程序实现九宫格翻牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • TypeScript中import type与import的区别详析

    TypeScript中import type与import的区别详析

    ES6引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量,下面这篇文章主要给大家介绍了关于TypeScript中import type与import区别的相关资料,需要的朋友可以参考下
    2022-07-07
  • 浅谈DOM的操作以及性能优化问题-重绘重排

    浅谈DOM的操作以及性能优化问题-重绘重排

    下面小编就为大家带来一篇浅谈DOM的操作以及性能优化问题-重绘重排。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 非常酷的js图形渐隐导航菜单栏

    非常酷的js图形渐隐导航菜单栏

    非常酷的js图形渐隐导航菜单栏...
    2007-08-08
  • js正则匹配出所有图片及图片地址src的方法

    js正则匹配出所有图片及图片地址src的方法

    这篇文章主要介绍了js正则匹配出所有图片及图片地址src的方法,涉及javascript正则匹配及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序实现刷脸登录

    微信小程序实现刷脸登录

    这篇文章主要为大家详细介绍了微信小程序实现刷脸登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • JavaScript 类型转换的详细实现

    JavaScript 类型转换的详细实现

    本文主要介绍了JavaScript 类型转换的详细实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • JavaScript躲避行星游戏实现全程

    JavaScript躲避行星游戏实现全程

    本文将使用 canvas 创建一个躲避小行星游戏。另外将重点介绍的两个方面是：如何使用 JavaScript 来检测键盘输入，以及如何在游戏中使用和处理 HTML5 音频。希望你能够喜欢
    2022-08-08
  • uniapp单页面实现页面切换的使用示例

    uniapp单页面实现页面切换的使用示例

    本文主要介绍了uniapp单页面实现页面切换的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • javascript实现数组内值索引随机化及创建随机数组的方法

    javascript实现数组内值索引随机化及创建随机数组的方法

    这篇文章主要介绍了javascript实现数组内值索引随机化及创建随机数组的方法,涉及javascript数组索引及随机数的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论