daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

　　在练习基于bootstrap   datatable的使用时，时间插件用到了daterangepicker，特做稍微了解，效果如图：

　　

1、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="220px" name="reportrange" id="reportrange" class="form-control" value=""/>
                &nbsp;&nbsp;
          <button type="button" id="reset" class="btn-sm btn-primary">复位</button>
     </div>
</div>  

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

3、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(汉化版)