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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值