Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
在bootstrap中的时间选择器有两种：dateTimePicker和dateRangePicker
1、dateTimePicker好像是官方嫡插件：
需要的文件：
<linkrel="stylesheet"href="css/bootstrap-datetimepicker.min.css"> <scriptsrc="js/bootstrap-datetimepicker.min.js"></script> <scriptsrc="js/bootstrap-datetimepicker.zh-CN.js"></script> <scriptsrc="js/moment.min.js"></script>
API直接参考：http://www.bootcss.com/p/bootstrap-datetimepicker/
2、dateRangePicker好像是第三方插件，它最终的是可以实现时间段的选择。
需要的文件：
<linkrel="stylesheet"href="css/daterangepicker-bs3.css"> <scriptsrc="js/daterangepicker.js"></script> <scriptsrc="js/moment.min.js"></script>
html代码：
<divclass="container-fluid"> <divclass="row-fluid"style="margin-top:5px"> <divclass="span4"> <divclass="control-group"> <labelclass="control-label"> 日期： </label> <divclass="controls"> <divid="reportrange"class="pull-leftdateRange"style="width:350px"> <iclass="glyphiconglyphicon-calendarfafa-calendar"></i> <spanid="searchDateRange"></span> <bclass="caret"></b> </div> </div> </div> </div> </div> </div>
js代码：
<scripttype="text/javascript">
$(document).ready(function(){
//时间插件
$('#reportrangespan').html(moment().subtract('hours',1).format('YYYY-MM-DDHH:mm:ss')+'-'+moment().format('YYYY-MM-DDHH: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:['btnbtn-default'],
applyClass:'btn-smallbtn-primaryblue',
cancelClass:'btn-small',
format:'YYYY-MM-DDHH:mm:ss',//控件中from和to显示的日期格式
separator:'to',
locale:{
applyLabel:'确定',
cancelLabel:'取消',
fromLabel:'起始时间',
toLabel:'结束时间',
customRangeLabel:'自定义',
daysOfWeek:['日','一','二','三','四','五','六'],
monthNames:['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
firstDay:1
}
},function(start,end,label){//格式化日期显示框
$('#reportrangespan').html(start.format('YYYY-MM-DDHH:mm:ss')+'-'+end.format('YYYY-MM-DDHH:mm:ss'));
});
//设置日期菜单被选项--开始--
/*
vardateOption;
if("${riqi}"=='day'){
dateOption="今日";
}elseif("${riqi}"=='yday'){
dateOption="昨日";
}elseif("${riqi}"=='week'){
dateOption="最近7日";
}elseif("${riqi}"=='month'){
dateOption="最近30日";
}elseif("${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>
但是这里的月份汉化存在问题，建议需要去moment.min.js文件里面去修改。
也可以在后期汉化，比较完整的代码：
vartable;
$(function(){
table=$('#example').DataTable({
"ajax":{
"url":"/example/resources/server_processing_customCUrl.php",
"data":function(d){
//添加额外的参数传给服务器
d.extra_search=$('#reportrangespan').html();
}},
"processing":true,
"serverSide":true,
"language":{
"sProcessing":"处理中...",
"sLengthMenu":"显示_MENU_项结果",
"sZeroRecords":"没有匹配结果",
"sInfo":"显示第_START_至_END_项结果，共_TOTAL_项",
"sInfoEmpty":"显示第0至0项结果，共0项",
"sInfoFiltered":"(由_MAX_项结果过滤)",
"sInfoPostFix":"",
"sSearch":"搜索:",
"sUrl":"",
"sEmptyTable":"表中数据为空",
"sLoadingRecords":"载入中...",
"sInfoThousands":",",
"oPaginate":{
"sFirst":"首页",
"sPrevious":"上页",
"sNext":"下页",
"sLast":"末页"
},
"oAria":{
"sSortAscending":":以升序排列此列",
"sSortDescending":":以降序排列此列"
}
},
"dom":
"<'row'<'span9'l<'#mytoolbox'>><'span3'f>r>"+
"t"+
"<'row'<'span6'i><'span6'p>>",
initComplete:initComplete
});
});
/**
*表格加载渲染完毕后执行的方法
*@paramdata
*/
functioninitComplete(data){
vardataPlugin=
'<divid="reportrange"class="pull-leftdateRange"style="width:400px;margin-left:10px">'+
'日期：<iclass="glyphiconglyphicon-calendarfafa-calendar"></i>'+
'<spanid="searchDateRange"></span>'+
'<bclass="caret"></b></div>';
$('#mytoolbox').append(dataPlugin);
//时间插件
$('#reportrangespan').html(moment().subtract('hours',1).format('YYYY-MM-DDHH:mm:ss')+'-'+moment().format('YYYY-MM-DDHH: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:['btnbtn-default'],
applyClass:'btn-smallbtn-primaryblue',
cancelClass:'btn-small',
format:'YYYY-MM-DDHH:mm:ss',//控件中from和to显示的日期格式
separator:'to',
locale:{
applyLabel:'确定',
cancelLabel:'取消',
fromLabel:'起始时间',
toLabel:'结束时间',
customRangeLabel:'自定义',
daysOfWeek:['日','一','二','三','四','五','六'],
monthNames:['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
firstDay:1
}
},function(start,end,label){//格式化日期显示框
$('#reportrangespan').html(start.format('YYYY-MM-DDHH:mm:ss')+'-'+end.format('YYYY-MM-DDHH:mm:ss'));
});
//设置日期菜单被选项--开始--
vardateOption;
if("${riqi}"=='day'){
dateOption="今日";
}elseif("${riqi}"=='yday'){
dateOption="昨日";
}elseif("${riqi}"=='week'){
dateOption="最近7日";
}elseif("${riqi}"=='month'){
dateOption="最近30日";
}elseif("${riqi}"=='year'){
dateOption="最近一年";
}else{
dateOption="自定义";
}
$(".daterangepicker").find("li").each(function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
}
if(dateOption==$(this).html()){
$(this).addClass("active");
}
});
//设置日期菜单被选项--结束--
//选择时间后触发重新加载的方法
$("#reportrange").on('apply.daterangepicker',function(){
//当选择时间后，出发dt的重新加载数据的方法
table.ajax.reload();
//获取dt请求参数
varargs=table.ajax.params();
console.log("额外传到后台的参数值extra_search为："+args.extra_search);
});
functiongetParam(url){
vardata=decodeURI(url).split("?")[1];
varparam={};
varstrs=data.split("&");
for(vari=0;i<strs.length;i++){
param[strs[i].split("=")[0]]=strs[i].split("=")[1];
}
returnparam;
}
}
幸福小彩蛋：
在网上搜索dateranggepicker的资料时，会找到一个比较官方的网站：http://www.daterangepicker.com/，api全面，但是实际的操作习惯并不便利；所以我更建议daterangepicker-bs3。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。