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. Java基础(1) - 语法 & 概念

    Java基础语法 基础 1. Java对大小写敏感 2. Java注释 //单行注释 这是一行注释 /* 这里是多行 注释 */ /** 这里是文档注释 @author 0o晓月メ */ 3. 访问修 ...

  2. JS之正则表达式

    一.正则表达的目标: 1.使用表单事件和脚本函数实现表单验证 2.使用String对象和文本框控件常用属性和方法实现客户端验证 二.什么需要表单验证: 1.表单元素是否为空 2.用户名和密码 3.E- ...

  3. 初试spring-session

    一.简介 spring-session提供了用户会话信息管理的API和实现. 它将取代容器中的HttpSession.在没有容器会话集群方案的情况下,使得支持会话集群微不足道. 它支持在一个浏览器实例 ...

  4. [高并发]EntityFramework之高性能扩展

    目录 简介 读写分离 指定字段更新 事务 Entity 简介 本EF扩展插件将持续更新:开源,敏捷,高性能.(由于EF Core暂未提供方便的钩子位置,暂无EF Core版本) EntityFrame ...

  5. VB6之写注册表

    难免会遇到写注册表的情况,写了个实用点的RegWrite函数.为了减少代码量,用WScript.Shell取代了API来实现. 使用方式就在注释中了,就不再过多解释了.PS:注释比实现代码要丰富多了, ...

  6. java 中的 instanceof

    instanceof是Java的一个二元操作符,和==,>,<是同一类东东.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boo ...

  7. 【PHP】PHP面向对象编程--phpOOP入门

     PHP从入门到精通 之PHP的面相对象编程 面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序 ...

  8. Python-WXPY实现微信监控报警

    概述: 本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序.博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的将工作和学习联系在一起. 博文中主要使用到的 ...

  9. CentOS7 搭建Ambari-Server，安装Hadoop集群（一）

    2017-07-05:修正几处拼写错误,之前没发现,抱歉! 第一次在cnblogs上发表文章,效果肯定不会好,希望各位多包涵. 编写这个文档的背景是月中的时候,部门老大希望我们能够抽时间学习一下Had ...

  10. linux常用的监控命令

    转自:http://www.cnblogs.com/huangxm/p/6278615.html 1.  top 显示所有正在运行而且处于活动状态的实时进程, 而且会定期更新显示结果:它显示了CPU使 ...