daterangepicker+ bootstrap +php +ajax +datatable雙日曆的使用

　　在練習基於bootstrap   datatable的使用時，時間插件用到了daterangepicker，特作稍微瞭解，效果如圖：

　　

 

一、html

<div class="panel">
    <div class="input-group" id="id_search_date">
         <span>按開站時間查詢：</span>
         <span class="add-on input-group-addon">
             <i class="glyphicon glyphicon-calendar fa fa-calendar" style="font-size: 18px"></i>
          </span>
          <input type="text" readonly style="width:220px" name="reportrange" id="reportrange" class="form-control" value=""/>
                &nbsp;&nbsp;
          <button type="button" id="reset" class="btn-sm btn-primary">復位</button>
     </div>
</div>  

二、css、js引入

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="./css/daterangepicker.css" rel="stylesheet" media="screen">


<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap.min.js"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/daterangepicker.js" charset="UTF-8"></script>

三、js配置

/*****時間插件************************************************************************************************/
            var start = moment().subtract(29, 'days'); 
            var end = moment();
            function cb(start, end) {
                $('#reportrange span').html(start.format('YYYY-MMMM-D') + ' - ' + end.format('YYYY-MMMM-D'));
            }
            $('#reportrange').daterangepicker({  
                //minDate: '01/01/2012',                //最小時間  
                //maxDate : moment(),                     //最大時間
                //dateLimit : { days : 30 },             //起止時間的最大間隔
                showDropdowns : true,
                // timePicker : true,                     //是否顯示小時和分鐘  
                "linkedCalendars": false,
                "showCustomRangeLabel": false,
                "alwaysShowCalendars": true,
                "opens": "right",                        //日期選擇框的彈出位置  
                startDate: start,
                endDate: end,
                ranges: {
                    //'最近1小時': [moment().subtract('hours',1), moment()],
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7天': [moment().subtract(6, 'days'), moment()],
                    '最近30天': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上個月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                locale : {  
                    applyLabel : '肯定',  
                    cancelLabel : '取消',  
                    fromLabel : '起始時間',  
                    toLabel : '結束時間',  
                    customRangeLabel : '自定義',  
                    daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],  
                    monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',  
                            '七月', '八月', '九月', '十月', '十一月', '十二月' ],  
                    firstDay : 1  
                },
                buttonClasses : [ 'btn btn-default' ],  
                applyClass : 'btn-small btn-primary blue',  
                cancelClass : 'btn-small',
            }, cb);
            cb(start, end);
            //時間復位按鈕
            $("#reset").click(function () {
                $('#reportrange').val(' ');
            });
 /*****時間插件************************************************************************************************/

 

附件爲本例代碼：參考  基於bootstrap + php +ajax datatable 插件的使用終極總結篇

 

引用文件下載地址：https://github.com/dangrossman/bootstrap-daterangepicker

參數參考：bootstrap之雙日曆時間段選擇控件—daterangepicker(漢化版)