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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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 中执行排序与 MySQL 中排序
2009/04/21 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php教程之phpize使用方法
2014/02/12 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python转换摩斯密码示例
2014/02/16 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python简单商城购物车实例代码
2018/03/15 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
药物学专业学生的自我评价
2013/10/27 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
实习计划书范文
2015/01/16 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS