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

前端之家收集整理的这篇文章主要介绍了bootstrap daterangepicker双日历时间段选择控件详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、需要引入的css与js

<script type="text/javascript" src="jquery-1.10.1.min.js">
<script type="text/javascript" src="bootstrap.min.js">
<script type="text/javascript" src="moment.js">
<script type="text/javascript" src="daterangepicker-1.3.7.js">

二、html部分代码

三、使用js调用daterangepicker

插件 $('#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,//是否<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>第几周 
            timePicker : true,//是否<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>小时和分钟 
            timePickerIncrement : 60,//时间的增量,单位为分钟 
            timePicker12Hour : false,//是否使用12小时制来<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>时间 
            ranges : { 
              //'最近1小时': [moment().subtract('hours',1),moment()],'今日': [moment().startOf('day'),'昨日': [moment().subtract('days',1).startOf('day'),moment().subtract('days',1).endOf('day')],'最近7日': [moment().subtract('days',6),'最近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 <a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>的日期格式 
            separator : ' to ',locale : { 
              applyLabel : '确定',cancelLabel : '取消',fromLabel : '起始时间',toLabel : '结束时间',customRangeLabel : '<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>',daysOfWeek : [ '日','一','二','三','四','五','六' ],monthNames : [ '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月' ],firstDay : 1 
            } 
          },function(start,end,label) {//格式化日期<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>框 

            $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss')); 
          }); 

  //设置日期<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>被选项 --开始-- 
 /* 
     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 = "<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>"; 
     } 
      $(".daterangepicker").find("li").each(function (){ 
        if($(this).hasClass("active")){ 
          $(this).removeClass("active"); 
        } 
        if(dateOption==$(this).html()){ 
          $(this).addClass("active"); 
        } 
     });*/ 
        //设置日期<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>被选项 --结束-- 
}) 

四、效果

五、实例下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Bootstrap相关文章