yii 使用bootstrap-daterangepicker做时间筛选

首先需要2个js

http://momentjs.cn/

http://www.daterangepicker.com/

momentjs需要放前面

前端样式

<div class="form-group">
                <label>Date range button:</label>

                <div class="input-group">
                  <button type="button" class="btn btn-default pull-right" id="daterange-btn">
                    <span>
                      <i class="fa fa-calendar"></i> Date range picker
                    </span>
                    <i class="fa fa-caret-down"></i>
                  </button>
                </div>
              </div>

yii封装，可以查看

https://blog.csdn.net/tang05709/article/details/100736193 yii实现搜索Widget

在里面添加

private function createTimeSearch() {
        if($this->showTimeSearch == 1) {
            $showText = Html::tag('span', Yii::t('backend', 'create_daterange_filter'));
        } else if($this->showTimeSearch == 2) {
            $showText = Html::tag('span', Yii::t('backend', 'start_daterange_filter'));
        } else if($this->showTimeSearch == 3) {
            $showText = Html::tag('span', Yii::t('backend', 'pay_daterange_filter'));
        }
        
        $downIcon = Html::tag('i', '', ['class' => 'fa fa-caret-down']);
        $button = Html::button($showText . $downIcon, ['class' => 'btn btn-default pull-right btn-time-search', 'data-url' => $this->postUrl]);
        $inputGroup = Html::tag('div', $button, ['class' => 'input-group']);
        $formGroup = Html::tag('div', $inputGroup, ['class' => 'form-group']);
        return Html::tag('div', $formGroup, ['class' => 'time-search']);
    }

生成的html如下

<div class="form-group">
                <label>Date range button:</label>

                <div class="input-group">
                  <button type="button" class="btn btn-default pull-right btn-time-search">
                    <span>
                      <i class="fa fa-calendar"></i> Date range picker
                    </span>
                    <i class="fa fa-caret-down"></i>
                  </button>
                </div>
              </div>

js

$('.content .content-search .time-search .btn-time-search').daterangepicker({
        opens: 'right',
        locale: {
            applyLabel: '确定',
            cancelLabel: '取消',
            fromLabel: '',
            toLabel: '',
            customRangeLabel: '自定义区间',
            daysOfWeek: ['周日', '周一', '周二', '周三', '周四', '周五','周六'],
            monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            firstDay: 1
        },
        ranges   : {
            '今天'       : [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')]
        },
        startDate: moment().subtract(29, 'days'),
        endDate  : moment(),
    }, function(start, end) {
        $('.content .content-search .time-search .btn-time-search span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'))
    }) 
    $('.content .content-search .time-search .btn-time-search').on('apply.daterangepicker', function(ev, picker) { 
        var url = ev.currentTarget.dataset.url 
        var postUrl = baseBackend + '/' + url
        window.location.href = postUrl + "?start_at=" + picker.startDate.format('YYYY-MM-DD') + "&end_at=" + picker.endDate.format('YYYY-MM-DD')
    });

如果需要显示时分秒：

• timePicker: (true/false) Adds select boxes to choose times in addition to dates.
• timePickerIncrement: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).
• timePicker24Hour: (true/false) Use 24-hour instead of 12-hour times, removing the AM/PM selection.
• timePickerSeconds: (true/false) Show seconds in the timePicker.

$('.content .content-search .time-search .btn-time-search').daterangepicker({
        opens: 'right',
        locale: {
            format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
            applyLabel: '确定',
            cancelLabel: '取消',
            fromLabel: '',
            toLabel: '',
            customRangeLabel: '自定义区间',
            daysOfWeek: ['周日', '周一', '周二', '周三', '周四', '周五','周六'],
            monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            firstDay: 1
        },
        timePicker : true, //是否显示小时和分钟
        timePicker24Hour : true, //是否使用24小时制来显示时间
        timePickerSeconds: true,
        ranges   : {
            '今天'       : [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')]
        },
        startDate: moment().subtract(29, 'days'),
        endDate  : moment(),
        
    }, function(start, end) {
        $('.content .content-search .time-search .btn-time-search span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'))
    }) 
    $('.content .content-search .time-search .btn-time-search').on('apply.daterangepicker', function(ev, picker) { 
        var url = ev.currentTarget.dataset.url 
        var postUrl = baseBackend + '/' + url
        window.location.href = postUrl + "?start_at=" + picker.startDate.format('YYYY-MM-DD HH:mm:ss') + "&end_at=" + picker.endDate.format('YYYY-MM-DD HH:mm:ss')
    });

后台筛选

 $query =  Ad::find();
// 添加时间筛选
        $start_at = Yii::$app->request->get('start_at', '');
        $end_at = Yii::$app->request->get('end_at', '');
        if(!empty($start_at) && !empty($end_at)) {
            $query->andFilterWhere(['between', 'start_at', strtotime($start_at), strtotime($end_at)]);
        }