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

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

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

后端已有实体类：

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

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

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

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

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

现在效果如图：

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

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

修改后效果如图所示：

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

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

AND date_format(u.create_time,'%y%m%d') >= date_format(#{params.beginTime},'%y%m%d')AND date_format(u.create_time,'%y%m%d') <= date_format(#{params.endTime},'%y%m%d')

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

 前端代码部分：（显示）

（方法）

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

最终实现效果：

完成任务，哈哈。

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！