yii gridview功能强大，但是时间筛选比较麻烦，与数据库的存储格式有关，本文的时间格式是date类型

那么问题来了，yii只提供关于时间的text搜索格式，就是只能查找精确日期比如2017-8-10。万能的客户说这样不行，我要搜索时间段！我只要一个输入框！我要自动提交！

                   

注意要点：

1.首先要在gridview中引入相关js，实现双日期，这里选择了jquery.daterangepicker.js，简单大方（缺点：不能选择年份，需要手动点击，我这里不会大幅度跨年份，可用）

2.要在searchmodel里面对数据进行处理，进行时间查询

3.坑：选择日期后，输入框没有光标，需要二次点击，然后回车才能实现数据刷新，与原装gridview体验相差较大

4.梯：在检测到输入日期数据后，使用jq模拟回车提交动作，完美实现了类似gridview的原装体验，丝般顺滑

view中

<?php

//use yii\web\View;

use kartik\grid\GridView;

use yii\bootstrap\Html;

use common\helps\ArrayHelper;

use yii\helpers\Url;


//引入时间段js，这里使用了jquery.daterangepicker.js

$this->registerCssFile('/plugins/datep/css/daterangepicker.css');

$this->registerJsFile('/plugins/datep/js/moment.min.js');

$this->registerJsFile('/plugins/datep/js/jquery.daterangepicker.js');

$this->registerJsFile('/plugins/datep/js/demo.js');

?>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">

            <div class="col-sm-12">

                <div class="ibox float-e-margins">

                     <?= backend\widgets\TitleBack::widget(['title'=>'记录管理']) ?>

                    <div class="ibox-content">    

                    <?php

                        echo GridView::widget([

                                'dataProvider' => $dataProvider,

                                'filterModel' => $searchModel,

                                'columns' => [

                                    ['class' => 'yii\grid\SerialColumn'],

                                    ['class' => 'yii\grid\CheckboxColumn'],

                                    'title',

                                    [

                                        
　　　　　　　　　　　　　　　　　　　　　　　　'label'=>'下发时间',
　　　　　　　　　　　　　　　　　　　　　　　　'attribute'=>'issued',

                                        　'value' => function ($data) {

                                           return ArrayHelper::get_date_time($data->issued);

                                        },

                                    ],

                                ]

                         ]);

                    ?>

                        </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

demo.js放在最后说，先说PatentDataBdSearch  对输入框发送过来的数据进行处理，时间段查询数据库

//时间段筛选

        if($this->issued){

            $time=  explode('~', $this->issued);

            $query->andFilterWhere(['between', 'patent_data.issued', $time[0],$time[1]]);

        }

demo.js   实现数据检测，模拟回车操作

$(function(){

    /*

    define a new language named "custom"   插件设置

    */

    $.dateRangePickerLanguages['custom'] =

    {

        'selected': 'Choosed:',

        'days': 'Days',

        'apply': 'Close',

        'week-1' : 'Mon',

        'week-2' : 'Tue',

        'week-3' : 'Wed',

        'week-4' : 'Thu',

        'week-5' : 'Fri',

        'week-6' : 'Sat',

        'week-7' : 'Sun',

        'month-name': ['January','February','March','April','May','June','July','August','September','October','November','December'],

        'shortcuts' : 'Shortcuts',

        'past': 'Past',

        '7days' : '7days',

        '14days' : '14days',

        '30days' : '30days',

        'previous' : 'Previous',

        'prev-week' : 'Week',

        'prev-month' : 'Month',

        'prev-quarter' : 'Quarter',

        'prev-year' : 'Year',

        'less-than' : 'Date range should longer than %d days',

        'more-than' : 'Date range should less than %d days',

        'default-more' : 'Please select a date range longer than %d days',

        'default-less' : 'Please select a date range less than %d days',

        'default-range' : 'Please select a date range between %d and %d days',

        'default-default': 'This is costom language'

    };

    //下面设置称自己的输入框选择器

    $("input[name='PatentDataBdSearch[issued]']").dateRangePicker(

    {

　　　　 //时间段的类型设置，这里是输入框时间段以~分隔，选择时间后自动消失弹出框

         separator : ' ~ ',

         autoClose: true

    }).bind('datepicker-change',function(e,r)

    {

        try

        {

            console.log(r);

                        //重要：如果检测有输入值了，就在输入框显示光标，或者模拟回车事件，自动提交，像gridview原生功能

　　　　　　　　　　　　　　//不添加下面的代码，将无法自动提交，

                        var issued=$("input[name='PatentDataBdSearch[issued]']").val();

                        console.log(issued);

                        if(issued){

                            //输入之后显示光标

                            //$("input[name='PatentDataBdSearch[issued]']").focus();

　　　　　　　　　　　　　　　　//模拟回车操作，输入后自动提交，刷新数据,一定要设置时间计数器，否则将无法提交

                            setTimeout(function(){

                                e = jQuery.Event("keydown");

                                e.keyCode = 13; //enter key

                                jQuery("input[name='PatentDataBdSearch[issued]']").trigger(e);

                            },100);

                        }

        }catch(e){}

    });

});

yii gridview 时间段筛选（一个输入框，自动提交，高清大图）的更多相关文章

  1. input autocomplete属性设计输入框自动联想（php实现）

    因为客户临时要求加一个输入框自动联想,就开始了解这块.结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui: 以下是我用的版本,以及连接地址: jQuery的js文件: <s ...

  2. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域（input）

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

  3. ios上【点击select元素，输入框自动获得焦点的问题】

    今天遇到了一个很奇怪的问题:在ios手机上,如果页面出现滚动条,点击select元素的时候,偶尔会出现 “ 页面上的某一个输入框自动获得焦点 “ 的问题. 这个问题困扰我好久,一直找不到答案,今天终于 ...

  4. Cocos2D iOS之旅:如何写一个敲地鼠游戏(一):高清屏显示和UIKit

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  5. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  6. form表单 一个input时 回车自动提交

    问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...

  7. vue中输入框聚焦，自动跳转下一个输入框

    比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...

  8. 遇到的一个Form表单自动提交问题解决办法

    Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...

  9. Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

随机推荐

  1. 读RCNN论文笔记

    1. RCNN的模型(如下图)描述: RCNN相比传统的物体检测,还是引入传统的物体检测的基本流程,先找出候选目标物体,逐个的提取特征,不过rbg大神引入了当时炙手可热的CNN卷积网络取代传统上的HO ...

  2. P2727 Stringsobits

    01串 Stringsobits 题目背景 考虑排好序的N(N<=31)位二进制数. 题目描述 他们是排列好的,而且包含所有长度为N且这个二进制数中1的位数的个数小于等于L(L<=N)的数 ...

  3. eclipse 设置 默认编码为 utf-8

    学习javaweb时,开发工具都采用utf-8的编码方式,给eclipse设置默认编码为utf-8的编码方法 菜单 Window -> preference -> General -> ...

  4. Java纸牌小demo以及日历小demo

    //卡牌类 public class Card { //定义卡牌的点数 public static final String[] cardName = { "3", "4 ...

  5. POJ 2251 三维BFS(基础题）

    Dungeon Master Description You are trapped in a 3D dungeon and need to find the quickest way out! Th ...

  6. 【原创】EntityFramework Core 中使用 CodeFirst 模式时 PowerShell 版本问题及解决

    一.描述: 在使用 Entity Framework Core 时,使用 CodeFirst 模式, 在 VS 中的 PMC(nuget 包管理 控制台) 控制台界面使用如下命令: Install-P ...

  7. 微信小程序探索（一）

    一.小程序到底是个什么鬼? 现在Android系统越用越卡的现状很头疼,手机上再也不想装太多的App,而市面上层出不穷的各种应用,有时又是我们需要用到的,怎么办呢!!微信小程序就是一种不需要下载安装即 ...

  8. 机器学习 —— 基础整理（三）生成式模型的非参数方法： Parzen窗估计、k近邻估计；k近邻分类器

    本文简述了以下内容: (一)生成式模型的非参数方法 (二)Parzen窗估计 (三)k近邻估计 (四)k近邻分类器(k-nearest neighbor,kNN) (一)非参数方法(Non-param ...

  9. JavaSE的基础语法之标识符：

    标识符(掌握) (1)就是给类,接口,方法,变量等起名字的字符序列 (2)组成规则: A:英文大小写字母 B:数字 C:$和_ (3)注意事项: A:不能以数字开头 B:不能是java中的关键字 C: ...

  10. 关于javacc的认识

    http://www.cnblogs.com/Gavin_Liu/archive/2009/03/07/1405029.html