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. 【LeetCode】125. Valid Palindrome

    题目: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ig ...

  2. 轻量级高性能ORM框架：Dapper高级玩法

    Dapper高级玩法1: 数据库中带下划线的表字段自动匹配无下划线的Model字段. Dapper.DefaultTypeMap.MatchNamesWithUnderscores = true; 备 ...

  3. 一级缓存二级缓存（hibernate）

    缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...

  4. 收集了一些容易出错的题，可能大家也不会注意到的基础知识（js）

    ---恢复内容开始--- 1.题中运用到函数表达式.构造函数.原型.优先级.this. 2.参数影响 3.对原型的运用 4.递归 5.基本类型与引用类型传递 6.优先级 7.自调用函数 ---恢复内容 ...

  5. IT行业歧视40岁以上人群为找工作还要谎报年龄[转]

    IT行业歧视40岁以上人群为找工作还要谎报年龄(这样不好) http://www.aliyun.com/zixun/content/2_6_616161.html [赛迪网讯]4月5日消息,许多40多 ...

  6. nodejs 全局变量和全局对象

    1.全局对象 所有模块都可以调用 1)global:表示Node所在的全局环境,类似于浏览器中的window对象. 2)process:指向Node内置的process模块,允许开发者与当前进程互动. ...

  7. FreeRTOS——错误排查

    1. printf-stdarg.c 在调用标准库函数时,栈空间的用量可能急剧上升,特别是IO与字符串处理函数,比如 sprintf(). 在FreeRTOS下载包中有一个名为printf-stdar ...

  8. .Net 调用微信公众号扫一扫

    1.绑定域名 去微信公众号平台中设置js接口安全域名,要注意的是不填写http://, 只填写域名即可,如 www.baidu.com. 一个月只能修改三次,要谨慎填写. 2.引入JS文件 在页面中引 ...

  9. SpringMVC源码情操陶冶-View视图渲染

    本节简单分析View视图对象的render方法 View接口 最重要的就是render()方法,具体源码如下 /** * Render the view given the specified mod ...

  10. Spring源码情操陶冶-AbstractApplicationContext#registerBeanPostProcessors

    承接前文Spring源码情操陶冶-AbstractApplicationContext#invokeBeanFactoryPostProcessors 瞧瞧官方注释 /** * Instantiate ...