本文主要是介绍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 + '/' + urlwindow.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 + '/' + urlwindow.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)]);}
这篇关于yii 使用bootstrap-daterangepicker做时间筛选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
