bootstrap daterangepicker双日历时间段选择控件详解


Posted in Javascript onJune 15, 2017

双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合。  

一、需要引入的css与js 

<link href="bootstrap.min.css" rel="stylesheet">   
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-1.3.7.css" /> 
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="bootstrap.min.js"></script> 
<script type="text/javascript" src="moment.js"></script> 
<script type="text/javascript" src="daterangepicker-1.3.7.js"></script>

 二、html部分代码

<div class="page-content"> 
      <!-- BEGIN PAGE CONTAINER--> 
  <div class="container-fluid"> 
    <div class="row-fluid" style="margin-top:5px"> 
      <div class="span4"> 
        <div class="control-group"> 
          <label class="control-label"> 
            日期: 
          </label> 
        <div class="controls"> 
          <div id="reportrange" class="pull-left dateRange" style="width:350px"> 
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
            <span id="searchDateRange"></span> 
            <b class="caret"></b> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

三、使用js调用daterangepicker 

<script type="text/javascript"> 
    $(document).ready(function (){ 
          //时间插件 
          $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss')); 
     
          $('#reportrange').daterangepicker( 
              { 
                // startDate: moment().startOf('day'), 
                //endDate: moment(), 
                //minDate: '01/01/2012',  //最小时间 
                maxDate : moment(), //最大时间  
                dateLimit : { 
                  days : 30 
                }, //起止时间的最大间隔 
                showDropdowns : true, 
                showWeekNumbers : false, //是否显示第几周 
                timePicker : true, //是否显示小时和分钟 
                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 HH:mm:ss', //控件中from和to 显示的日期格式 
                separator : ' to ', 
                locale : { 
                  applyLabel : '确定', 
                  cancelLabel : '取消', 
                  fromLabel : '起始时间', 
                  toLabel : '结束时间', 
                  customRangeLabel : '自定义', 
                  daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], 
                  monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', 
                      '七月', '八月', '九月', '十月', '十一月', '十二月' ], 
                  firstDay : 1 
                } 
              }, function(start, end, label) {//格式化日期显示框 
                 
                $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss')); 
              }); 
 
      //设置日期菜单被选项 --开始-- 
     /* 
         var dateOption ; 
         if("${riqi}"=='day') { 
            dateOption = "今日"; 
         }else if("${riqi}"=='yday') { 
            dateOption = "昨日"; 
         }else if("${riqi}"=='week'){ 
            dateOption ="最近7日"; 
         }else if("${riqi}"=='month'){ 
            dateOption ="最近30日"; 
         }else if("${riqi}"=='year'){ 
            dateOption ="最近一年"; 
         }else{ 
            dateOption = "自定义"; 
         } 
          $(".daterangepicker").find("li").each(function (){ 
            if($(this).hasClass("active")){ 
              $(this).removeClass("active"); 
            } 
            if(dateOption==$(this).html()){ 
              $(this).addClass("active"); 
            } 
         });*/ 
            //设置日期菜单被选项 --结束-- 
    }) 
</script>

 四、效果图

bootstrap daterangepicker双日历时间段选择控件详解

五、实例下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
7个jQuery最佳实践
Jan 12 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
js禁止表单重复提交
Aug 29 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
详解react-router如何实现按需加载
Jun 15 #Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 #Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 #Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 #Javascript
详解react如何在组件中获取路由参数
Jun 15 #Javascript
react-router JS 控制路由跳转实例
Jun 15 #Javascript
You might like
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python实现聊天小程序
2018/03/13 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
九年级体育教学反思
2014/01/23 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
Python实现打乒乓小游戏
2021/09/25 Python