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-506-Relative Ranks]

    Given scores of N athletes, find their relative ranks and the people with the top three highest scor ...

  2. 【Android Developers Training】 8. 定义Action Bar风格

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  3. 【原创】Kafka 0.11消息设计

    Kafka 0.11版本增加了很多新功能,包括支持事务.精确一次处理语义和幂等producer等,而实现这些新功能的前提就是要提供支持这些功能的新版本消息格式,同时也要维护与老版本的兼容性.本文将详细 ...

  4. angular.js ng-repeat渲染时出现闪烁问题解决

    当我们前端运用到angular.js框架时,想必大家都会遇到一些坑.其中,我也来分享一个常见的angular.js渲染时出现的坑. 当我们进行页面渲染时,绑定表达式最开始会用{{data.name}} ...

  5. thinkphp的空控制器和空操作以及对应解决方法

    在上篇随笔中我们已经知道了tp框架的四种访问方式,那么当在地址栏输入不存在的操作方法.控制器会怎么样呢? 先看一下定义: 空操作:一个对象(控制器)调用本身不存在的方法 空控制器:在实例化控制器对象的 ...

  6. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  7. 面向对象15.1String类特点

    String 特点: 字符串对象一旦被初始化就不会被改变. public class Ssstring {public static void main(String[] args) { //这个是2 ...

  8. asp.net Mvc 动态创建Controller

    有这么个需求,Urls如下: http://localhost:52804 http://localhost:52804/home/test http://localhost:52804/test1 ...

  9. 【Data Visual】一文搞懂matplotlib数据可视化

    一文搞懂matplotlib数据可视化 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为 ...

  10. pc端的企业网站（IT修真院test8）详解1-3

    一,base.css基础样式表的意义 我昨天,整理了一下代码规范. 发现现在这个程度的页面还原.有必要创建一个规范的base.css库和framework.css库 而且也要为日后的工作整理一些常用的 ...