bootstrap之双日历时间段选择控件—daterangepicker
双日历时间段选择插件 — 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
- <pre name="code" class="html"><pre name="code" class="javascript"><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相关推荐
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 基于Bootstrap的时分秒选择控件timepicker
基于Bootstrap的时分秒选择控件timepicker 最近项目中要用到时间选择控件,然而研究了半天并没有发现 bootstrap-datetimepicker 控件只选择时分秒的配置方法.自己动 ...
- 基于qt中QCalendarWidget的双日历时间范围选择控件(自定义)
控件预览: 控件基于QT设计,单击日历设置时间范围起点,再次单击日历设置时间范围终点: 当起止时间为同一天时,所选日期右上角显示"单"字样: 控件设计说明: 控件基于QT中QDia ...
- 【仿汽车之家】价格区间选择控件
仿照汽车之家iOS客户端"找车"栏目的价格区间选择控件,最终实现效果如下: 一.界面实现 *根据屏幕大小以及刻度的大小,宏定义需要用到的一些值 #define SCREENW [U ...
- 使用sui实现的选择控件【性别、日期、省市级联】
使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...
- android double比较大小吗,Android双向选择控件DoubleSeekBar使用详解
本文实例为大家分享了Android双向选择控件DoubleSeekBar的使用方法,供大家参考,具体内容如下 先看效果图 1.DoubleSlideSeekBar public class Doubl ...
- altas(ajax)控件(二十三):等级选择控件Rating
一. 简介 等级选择控件Rating提供了一种全新的方式来进行等级选择,在以往的web上我们只能通过使用特殊字符"☆"来表达等级,有了等级选择控件Rating我 ...
- 部门选择控件源代码公布
为了答谢大家对无须迭代两个循环完成树结构构建的支持特公布这两天新写的部门选择控件源代码,该控件最早是用一个用户控件实现数据调用采用Linq界面采用AtlasControlToolkit PopupCo ...
- 选择控件— UI组件系列
重点 (Top highlight) The word "toggle" is a reference to a switch with a short handle that a ...
- javascript 打造城市选择控件,兼容IE6以及以上,谷歌,Firefox
在淘宝旅行上看到的城市选择效果,感觉还不错,就自己的理解重新实现一遍,先看效果,然后再细说实现原理,支持鼠标上下键选择城市,支持直接输入城市名称,拼音首字母,全拼,支持IE6遮盖SELECT,压缩后1 ...
最新文章
- linux自学(一)之vmware虚拟机安装
- Javascript中的0,false,null,undefined,空字符串对比
- Python调用ansible API系列(一)获取资产信息
- 关于KernelFaultCheck启动项
- mysql周报内容范文_Mysql各种报表查询含实例,日报,周报,月报,时间差自动计算...
- Python基础知识(1)简介
- 科创板鸣锣开市 一图带你了解首批25家公司
- 已解决:nginx修改上传文件大小限制
- Linux chapter 7
- Java面试题总结 - Java多线程篇(附答案)
- Linux日文教程,【图片】#教程#修正配置 Noto Sans CJK 避免中文显示为异体(日文)字形【linux吧】_百度贴吧...
- 金山WPS c++ 二面面经
- cαr怎么发音_最全英语口语发音规则与技巧
- codewars练习(javascript)-2021/1/19
- matlab对数函数ln5,ln5(ln55怎么算的求过程)
- C语言的return用法
- 滴水逆向 C语言基础学习
- 移动办公哪个邮箱更好用
- 二十九、​Fluent瞬态时间步长与迭代步数的讨论
- Redis实战之查询缓存
热门文章
- mysql根据日周月分组计算
- java安装报错循环冗余检查_Java中循环冗余校验的实现方式介绍
- 电脑硬盘:数据错误(循环冗余检查)
- 研究Google maps及51ditu的图片切割及存储方法(转)
- 解决出现Creating mailbox file: File exists问题,并分析出错原因
- 有关《大道至简》的几点讨论~
- 游戏排行榜实现mysql_游戏中百万用户排行设计与实现
- mysql 5.6 配置ssl_MySQL 5.6使用 SSL 连接
- Oracle | Oracle初级全程学习笔记
- 阿里云服务器安全组入方向和出方向默认规则