【bootstrap】時間選擇器datetimepicker和daterangepicker

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

 

一、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/

 

 

 

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

View Code

 

 

 

可是這裏的月份漢化存在問題，建議須要去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    }

View Code

 

 

 

幸福小彩蛋：

在網上搜索dateranggepicker的資料時，會找到一個比較官方的網站： http://www.daterangepicker.com/，api全面，可是實際的操做習慣並不便利；因此我更建議daterangepicker-bs3： https://yunpan.cn/cMtj6QvDUd2RV  訪問密碼 05d3

 

獻上本身整理的時間選擇器資料： https://yunpan.cn/cMtj2MKPVsaYC  訪問密碼 cb56