啥也不会的实习生：给项目添加日期搜索控件

目前已有的前端显示界面，要求在搜索框后面添加一个日期搜索框，可以指定搜索日期

找到前端界面对应代码块如图：

后端已有实体类：

/*** 日期*/@JsonFormat(pattern = "yyyy-MM-dd")@Excel(name = "日期", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")private Date date;

根据前端其他代码照葫芦画瓢写出如下代码：

 <el-form-item label="日期" prop="date"><el-inputv-model="queryParams.date"placeholder="请输入日期"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item>

运行前后端项目，效果实现：

开发科的师傅看了我添加的日期搜索框，说要的不是这种效果，要的是那种只需要鼠标单击的那种日期选择，还要键盘输入太麻烦了。

经过搜索学习进行了前端代码修改后：

<el-form-item label="日期" prop="date"><el-date-pickerv-model="queryParams.date"placeholder="请输入日期"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"clearablesize="small"@keyup.enter.native="handleQuery"></el-date-picker></el-form-item>

现在效果如图：

发现多了小时分钟秒钟对项目无意义，只需要具体到日期就行了，于是想办法把去掉。

尝试下再修改了下前端代码，发现只要把type类型里的datetime改成date就行了。

<el-date-pickerv-model="queryParams.date"placeholder="请输入日期"type="date"value-format="yyyy-MM-dd HH:mm:ss"clearablesize="small"@keyup.enter.native="handleQuery"></el-date-picker>

修改后效果如图所示：

完成后又去问师傅，师傅说还不行，要那种有起始日期和截止日期的那种。

因为很多代码不懂，这个直到第二天上午才终于解决。师兄给我发了一个后端需要添加的代码，剩下的就我自己琢磨去了。

<if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 -->AND date_format(u.create_time,'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')</if><if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->AND date_format(u.create_time,'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')</if>

这段代码加在了对应的配置文件.xml文件中。

前端代码部分：（显示）

 <el-form-item label="日期" ><el-date-pickerv-model="dateRange"size="small"style="width: 240px"value-format="yyyy-MM-dd"type="daterange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>

（方法）

重置按钮操作中新添一行代码用来对日期进行重置。

最终实现效果：

完成任务，哈哈。

参考学习博客：vue中DateTimePicker日期时间选择器_aloofAnd的博客-CSDN博客_vue时间控件datepicker

vue-时间控件以及时间控件校验_程序员的每一天的博客-CSDN博客_vue时间控件

啥也不会的实习生：给项目添加日期搜索控件相关推荐

QT 基础知识一（QT安装、创建项目、常用窗口控件使用、信号与槽机制讲解）
QT概念 Qt:Qt是一个跨平台的C++框架(C++库),Qt除了支持界面设计(GUI编程),还封装了与网络编程.多线程.数据库连接.视频音频等相关的功能. ctrl 撤销(返回上一步) 市面常见的G ...
【炼丹术士的从零开始的安卓开发】Day1 项目结构与一些控件的学习
关于老版项目导入的一些问题 import android.support.v4.XXX或者import android.support.v7.XXX出错解决办法 import android.supp ...
【vue】使用vue+element搭建项目，Tree树形控件使用
目录一.安装依赖二.常用属性.事件三.demo应用 html代码属性用法 3.2.1 :default-expanded-keys(默认展开项) 3.2.2 :props="defa ...
在EasyUI项目中使用FileBox控件实现文件上传处理
我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...
【测宽仪项目】Hight-Speed Charting控件改变曲线的颜色、宽度、样式
改变颜色 COLORREF SerieColor=RGB(0,255,0); pLineSeries->SetColor(SerieColor);// pLineSeries要在头文件中初始化C ...
不同项目之间的控件共享
不同项目之间的控件共享上篇blog我有提到,不知如何解决不用项目之间的控件共享问题.很多朋友给予了热心的回答,这里一起表示感谢. 总结大家的回复,一般有2种观点,一是做成用户控件,二是 ...
.net framework开发winform_这个Winform的UI库也太全了！四十多个控件都在这一个项目里了...
之前 Gitee 为大家介绍过几款优质的 Winform 项目,发现Winform在大家心中的地位还是挺高的,那么今天就再给各位分享一款新鲜出炉的 Winform UI库--SunnyUI,一起跟 G ...
winform checkbox要点击两次_这个Winform的UI库也太全了！四十多个控件都在这一个项目里了...
之前 Gitee 为大家介绍过几款优质的 Winform 项目:这几个WinForm项目,让你更熟悉 .NET|Gitee 项目推荐,发现Winform在大家心中的地位还是挺高的,那么今天就再给各位分 ...
Android常用酷炫控件(开源项目)github地址汇总
转载一个很牛逼的控件收集帖... 第一部分个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

啥也不会的实习生：给项目添加日期搜索控件

啥也不会的实习生：给项目添加日期搜索控件相关推荐

最新文章

热门文章