在bootstrap中的时间选择器有两种：dateTimePicker和dateRangePicker
1、dateTimePicker好像是官方嫡插件：
需要的文件：
1 <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> 2 <script src="js/bootstrap-datetimepicker.min.js"></script> 3 <script src="js/bootstrap-datetimepicker.zh-CN.js"></script> 4 <script src="js/moment.min.js"></script>
2、dateRangePicker好像是第三方插件，它最终的是可以实现时间段的选择：
效果
需要的文件：
1 <link rel="stylesheet" href="css/daterangepicker-bs3.css"> 2 <script src="js/daterangepicker.js"></script> 3 <script src="js/moment.min.js"></script>
html代码：
1 <div class="container-fluid"> 2 <div class="row-fluid" style="margin-top:5px"> 3 <div class="span4"> 4 <div class="control-group"> 5 <label class="control-label"> 6 日期： 7 </label> 8 <div class="controls"> 9 <div id="reportrange" class="pull-left dateRange" style="width:350px"> 10 <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 11 <span id="searchDateRange"></span> 12 <b class="caret"></b> 13 </div> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div>
js代码：
1 <script type="text/javascript"> 2 $(document).ready(function (){ 3 //时间插件 4 $(\'#reportrange span\').html(moment().subtract(\'hours\', 1).format(\'YYYY-MM-DD HH:mm:ss\') + \' - \' + moment().format(\'YYYY-MM-DD HH:mm:ss\')); 5 $(\'#reportrange\').daterangepicker( 6 { 7 // startDate: moment().startOf(\'day\'), 8 //endDate: moment(), 9 //minDate: \'01/01/2012\', //最小时间 10 maxDate : moment(), //最大时间 11 dateLimit : { 12 days : 30 13 }, //起止时间的最大间隔 14 showDropdowns : true, 15 showWeekNumbers : false, //是否显示第几周 16 timePicker : true, //是否显示小时和分钟 17 timePickerIncrement : 60, //时间的增量，单位为分钟 18 timePicker12Hour : false, //是否使用12小时制来显示时间 19 ranges : { 20 //\'最近1小时\': [moment().subtract(\'hours\',1), moment()], 21 \'今日\': [moment().startOf(\'day\'), moment()], 22 \'昨日\': [moment().subtract(\'days\', 1).startOf(\'day\'), moment().subtract(\'days\', 1).endOf(\'day\')], 23 \'最近7日\': [moment().subtract(\'days\', 6), moment()], 24 \'最近30日\': [moment().subtract(\'days\', 29), moment()] 25 }, 26 opens : \'right\', //日期选择框的弹出位置 27 buttonClasses : [ \'btn btn-default\' ], 28 applyClass : \'btn-small btn-primary blue\', 29 cancelClass : \'btn-small\', 30 format : \'YYYY-MM-DD HH:mm:ss\', //控件中from和to 显示的日期格式 31 separator : \' to \', 32 locale : { 33 applyLabel : \'确定\', 34 cancelLabel : \'取消\', 35 fromLabel : \'起始时间\', 36 toLabel : \'结束时间\', 37 customRangeLabel : \'自定义\', 38 daysOfWeek : [ \'日\', \'一\', \'二\', \'三\', \'四\', \'五\', \'六\' ], 39 monthNames : [ \'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', 40 \'七月\', \'八月\', \'九月\', \'十月\', \'十一月\', \'十二月\' ], 41 firstDay : 1 42 } 43 }, function(start, end, label) {//格式化日期显示框 44 $(\'#reportrange span\').html(start.format(\'YYYY-MM-DD HH:mm:ss\') + \' - \' + end.format(\'YYYY-MM-DD HH:mm:ss\')); 45 }); 46 //设置日期菜单被选项 --开始-- 47 /* 48 var dateOption ; 49 if("${riqi}"==\'day\') { 50 dateOption = "今日"; 51 }else if("${riqi}"==\'yday\') { 52 dateOption = "昨日"; 53 }else if("${riqi}"==\'week\'){ 54 dateOption ="最近7日"; 55 }else if("${riqi}"==\'month\'){ 56 dateOption ="最近30日"; 57 }else if("${riqi}"==\'year\'){ 58 dateOption ="最近一年"; 59 }else{ 60 dateOption = "自定义"; 61 } 62 $(".daterangepicker").find("li").each(function (){ 63 if($(this).hasClass("active")){ 64 $(this).removeClass("active"); 65 } 66 if(dateOption==$(this).html()){ 67 $(this).addClass("active"); 68 } 69 });*/ 70 //设置日期菜单被选项 --结束-- 71 }) 72 </script>
但是这里的月份汉化存在问题，建议需要去moment.min.js文件里面去修改
也可以在后期汉化，比较完整的代码：
1 var table; 2 $(function () { 3 table = $(\'#example\').DataTable({ 4 "ajax": { 5 "url":"/example/resources/server_processing_customCUrl.php", 6 "data": function ( d ) { 7 //添加额外的参数传给服务器 8 d.extra_search = $(\'#reportrange span\').html(); 9 }}, 10 "processing": true, 11 "serverSide": true, 12 "language": { 13 "sProcessing": "处理中...", 14 "sLengthMenu": "显示 _MENU_ 项结果", 15 "sZeroRecords": "没有匹配结果", 16 "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", 17 "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", 18 "sInfoFiltered": "(由 _MAX_ 项结果过滤)", 19 "sInfoPostFix": "", 20 "sSearch": "搜索:", 21 "sUrl": "", 22 "sEmptyTable": "表中数据为空", 23 "sLoadingRecords": "载入中...", 24 "sInfoThousands": ",", 25 "oPaginate": { 26 "sFirst": "首页", 27 "sPrevious": "上页", 28 "sNext": "下页", 29 "sLast": "末页" 30 }, 31 "oAria": { 32 "sSortAscending": ": 以升序排列此列", 33 "sSortDescending": ": 以降序排列此列" 34 } 35 }, 36 "dom": 37 "<\'row\'<\'span9\'l<\'#mytoolbox\'>><\'span3\'f>r>"+ 38 "t"+ 39 "<\'row\'<\'span6\'i><\'span6\'p>>" , 40 initComplete:initComplete 41 }); 42 43 }); 44 45 /** 46 * 表格加载渲染完毕后执行的方法 47 * @param data 48 */ 49 function initComplete(data){ 50 51 var dataPlugin = 52 \'<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> \'+ 53 \'日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> \'+ 54 \'<span id="searchDateRange"></span> \'+ 55 \'<b class="caret"></b></div> \'; 56 $(\'#mytoolbox\').append(dataPlugin); 57 //时间插件 58 $(\'#reportrange span\').html(moment().subtract(\'hours\', 1).format(\'YYYY-MM-DD HH:mm:ss\') + \' - \' + moment().format(\'YYYY-MM-DD HH:mm:ss\')); 59 60 $(\'#reportrange\').daterangepicker( 61 { 62 // startDate: moment().startOf(\'day\'), 63 //endDate: moment(), 64 //minDate: \'01/01/2012\', //最小时间 65 maxDate : moment(), //最大时间 66 dateLimit : { 67 days : 30 68 }, //起止时间的最大间隔 69 showDropdowns : true, 70 showWeekNumbers : false, //是否显示第几周 71 timePicker : true, //是否显示小时和分钟 72 timePickerIncrement : 60, //时间的增量，单位为分钟 73 timePicker12Hour : false, //是否使用12小时制来显示时间 74 ranges : { 75 //\'最近1小时\': [moment().subtract(\'hours\',1), moment()], 76 \'今日\': [moment().startOf(\'day\'), moment()], 77 \'昨日\': [moment().subtract(\'days\', 1).startOf(\'day\'), moment().subtract(\'days\', 1).endOf(\'day\')], 78 \'最近7日\': [moment().subtract(\'days\', 6), moment()], 79 \'最近30日\': [moment().subtract(\'days\', 29), moment()] 80 }, 81 opens : \'right\', //日期选择框的弹出位置 82 buttonClasses : [ \'btn btn-default\' ], 83 applyClass : \'btn-small btn-primary blue\', 84 cancelClass : \'btn-small\', 85 format : \'YYYY-MM-DD HH:mm:ss\', //控件中from和to 显示的日期格式 86 separator : \' to \', 87 locale : { 88 applyLabel : \'确定\', 89 cancelLabel : \'取消\', 90 fromLabel : \'起始时间\', 91 toLabel : \'结束时间\', 92 customRangeLabel : \'自定义\', 93 daysOfWeek : [ \'日\', \'一\', \'二\', \'三\', \'四\', \'五\', \'六\' ], 94 monthNames : [ \'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', 95 \'七月\', \'八月\', \'九月\', \'十月\', \'十一月\', \'十二月\' ], 96 firstDay : 1 97 } 98 }, function(start, end, label) {//格式化日期显示框 99 100 $(\'#reportrange span\').html(start.format(\'YYYY-MM-DD HH:mm:ss\') + \' - \' + end.format(\'YYYY-MM-DD HH:mm:ss\')); 101 }); 102 103 //设置日期菜单被选项 --开始-- 104 var dateOption ; 105 if("${riqi}"==\'day\') { 106 dateOption = "今日"; 107 }else if("${riqi}"==\'yday\') { 108 dateOption = "昨日"; 109 }else if("${riqi}"==\'week\'){ 110 dateOption ="最近7日"; 111 }else if("${riqi}"==\'month\'){ 112 dateOption ="最近30日"; 113 }else if("${riqi}"==\'year\'){ 114 dateOption ="最近一年"; 115 }else{ 116 dateOption = "自定义"; 117 } 118 $(".daterangepicker").find("li").each(function (){ 119 if($(this).hasClass("active")){ 120 $(this).removeClass("active"); 121 } 122 if(dateOption==$(this).html()){ 123 $(this).addClass("active"); 124 } 125 }); 126 //设置日期菜单被选项 --结束-- 127 128 129 //选择时间后触发重新加载的方法 130 $("#reportrange").on(\'apply.daterangepicker\',function(){ 131 //当选择时间后，出发dt的重新加载数据的方法 132 table.ajax.reload(); 133 //获取dt请求参数 134 var args = table.ajax.params(); 135 console.log("额外传到后台的参数值extra_search为："+args.extra_search); 136 }); 137 138 function getParam(url) { 139 var data = decodeURI(url).split("?")[1]; 140 var param = {}; 141 var strs = data.split("&"); 142 143 for(var i = 0; i<strs.length; i++){ 144 param[strs[i].split("=")[0]] = strs[i].split("=")[1]; 145 } 146 return param; 147 } 148 }
幸福小彩蛋：
在网上搜索dateranggepicker的资料时，会找到一个比较官方的网站：http://www.daterangepicker.com/，api全面，但是实际的操作习惯并不便利；所以我更建议daterangepicker-bs3：https://yunpan.cn/cMtj6QvDUd2RV 访问密码 05d3
献上自己整理的时间选择器资料：https://yunpan.cn/cMtj2MKPVsaYC 访问密码 cb56