Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析

在bootstrap中的時間選擇器有兩種：dateTimePicker和dateRangePicker

1、dateTimePicker好像是官方嫡插件：

需要的文件：

?

1 2 3 4

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script> <script src="js/bootstrap-datetimepicker.zh-CN.js"></script> <script src="js/moment.min.js"></script>

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

2、dateRangePicker好像是第三方插件，它最終的是可以實現時間段的選擇。

需要的文件： 

?

1 2 3

<link rel="stylesheet" href="css/daterangepicker-bs3.css"> <script src="js/daterangepicker.js"></script> <script src="js/moment.min.js"></script>

html代碼： 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<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文件裏面去修改。 

也可以在後期漢化，比較完整的代碼： 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

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