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. 同一个tomcat多个项目共享session，一个tomcat两个项目共享sessionId

    同一个tomcat多个项目共享session,一个tomcat两个项目共享sessionId >>>>>>>>>>>>>& ...

  2. UltraEdit MAC破解方法

    在终端输入 printf '\x31\xC0\xFF\xC0\xC3\x90' | dd seek=$((0x92D370)) conv=notrunc bs=1 of=/Applications/U ...

  3. 快手 Android 工程师面经

    看着我把简历投完之后弹出的"完成"字样,我就十分的激动了,我是一名应届毕业生,老老实实的那种,学过的知识我都一步一个脚印的复习的完了,Lintcode上该刷的题,也妥妥的完成了,但 ...

  4. 玩玩微信公众号Java版之五：获取关注用户信息

    在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...

  5. USB的包结构及包分类

    USB的传输总是低位在前,高位在后. USB的传输方向:从设备到主机的数据为输入:从主机到设备的数据叫做输出. 1. 包结构 以同步域开始,紧跟着一个包标识符PID(Packet Identifier ...

  6. Java调度实现

    根据自己在项目中用到的调度,简单说说:(如有不正确的地方,请留言...) Java调度:他是用来解决访问时间慢的手段. 通俗的讲就是为需要的数据(你需要展示的数据)建立一张中间表存放,提前把数据读出来 ...

  7. MySQL学习笔记(三)：常用函数

    一:字符串函数 需要注意的几个细节: 1.cancat中有一个字符串为null,则结果为null. 2.left(str,x) 和 right(str,x)中x为null,则不返回任何字符串,不是nu ...

  8. 基于Windows环境下Myeclipse10.0下载安装破解及jdk的下载安装及环境变量的配置

    jdk的安装及环境变量的配置 1.安装JDK开发环境 附上jdk安装包的百度云链接 链接:http://pan.baidu.com/s/1mh6QTs8 密码:jkb6(当然自行去官网下载最好哒,可以 ...

  9. springboot启动时报错No session repository could be auto-configured.....

    具体异常提示: Error starting ApplicationContext. To display the auto-configuration report re-run your appl ...

  10. JAVA多线程之wait/notify

    本文主要学习JAVA多线程中的 wait()方法 与 notify()/notifyAll()方法的用法. ①wait() 与 notify/notifyAll 方法必须在同步代码块中使用 ②wait ...