bootstrap daterangepicker双日历时间段选择控件详解
发布时间：2020-12-18 00:36:42 所属栏目：安全 来源：网络整理
导读：双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件，可以设定多个时间段选项，也可以自定义时间段，由用户自己选择起始时间和终止时间，时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1，所以我把dateran
|
双日历时间段选择插件 — 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').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().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 显示的日期格式
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");
}
});*/
//设置日期菜单被选项 --结束--
})
四、效果图
五、实例下载地址以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
