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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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
一个SQL管理员的web接口
2006/10/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
python插入排序算法的实现代码
2013/11/21 Python
Python 功能和特点(新手必学)
2015/12/30 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python图像处理入门(一)
2019/04/04 Python
python实现ip代理池功能示例
2019/07/05 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
DBA的职责都有哪些
2012/05/16 面试题
我的大学四年规划书范文2014
2014/09/26 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
学校教学工作总结2015
2015/05/19 职场文书
宣传稿格式范文
2015/07/23 职场文书
社区宣传标语口号
2015/12/26 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python