Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

在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>

API直接参考：http://www.bootcss.com/p/bootstrap-datetimepicker/

2、dateRangePicker好像是第三方插件，它最终的是可以实现时间段的选择。
需要的文件：
<link rel="stylesheet" href="css/daterangepicker-bs3.css">
<script src="js/daterangepicker.js"></script>
<script src="js/moment.min.js"></script>

html代码：

<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代码：

 <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>

但是这里的月份汉化存在问题，建议需要去moment.min.js文件里面去修改。

也可以在后期汉化，比较完整的代码：

var table;$（function （） {table = $（"#example"）.DataTable（{"ajax": {"url":"/example/resources/server_processing_customCUrl.php","data": function （ d ） {//添加额外的参数传给服务器d.extra_search = $（"#reportrange span"）.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}）; }）; /*** 表格加载渲染完毕后执行的方法* @param data*/function initComplete（data）{ var dataPlugin ="<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> "+"日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> "+"<span id="searchDateRange"></span> "+"<b class="caret"></b></div> ";$（"#mytoolbox"）.append（dataPlugin）;//时间插件$（"#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"）;}}）;//设置日期菜单被选项 --结束--//选择时间后触发重新加载的方法$（"#reportrange"）.on（"apply.daterangepicker",function（）{//当选择时间后，出发dt的重新加载数据的方法table.ajax.reload（）;//获取dt请求参数var args = table.ajax.params（）;console.log（"额外传到后台的参数值extra_search为："+args.extra_search）;}）; function getParam（url） {var data = decodeURI（url）.split（"?"）[1];var param = {};var strs = data.split（"&"）; for（var i = 0; i<strs.length; i++）{param[strs[i].split（"="）[0]] = strs[i].split（"="）[1];}return param;}}

幸福小彩蛋：

在网上搜索dateranggepicker的资料时，会找到一个比较官方的网站：http://www.daterangepicker.com/，api全面，但是实际的操作习惯并不便利；所以我更建议daterangepicker-bs3。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。