怎么用Vue+java实现时间段的搜索

实现效果如图:

怎么用Vue+java实现时间段的搜索

标红的是需要注意的地方!
Vue操作:
1,如图:

怎么用Vue+java实现时间段的搜索

2,如图:(数据初始化)

怎么用Vue+java实现时间段的搜索

2.0初始化今天的日期和时间的样式:

2.1今天的日期:

// 时间范围–start
// daterangeLastInTime: [],
// daterangeLastInTime: [new Date(2022, 2, 10, 0, 0), new Date(2022, 2, 10, 23, 59)],
daterangeLastInTime: [this.parseTime(new Date(new Date().toLocaleDateString()).getTime()),this.parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 – 1))],

2.2,时间的样式:

     //时间样式(出现上面的效果图)      pickerOptions: {          shortcuts: [{            text: '最近一周',            onClick(picker) {              const end = new Date();              const start = new Date();              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);              picker.$emit('pick', [start, end]);            }          }, {            text: '最近一个月',            onClick(picker) {              const end = new Date();              const start = new Date();              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);              picker.$emit('pick', [start, end]);            }          }, {            text: '最近三个月',            onClick(picker) {              const end = new Date();              const start = new Date();              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);              picker.$emit('pick', [start, end]);            }          }]        },

4,如图:把时间放入对应的值

怎么用Vue+java实现时间段的搜索

5,重置操作需要注意:

怎么用Vue+java实现时间段的搜索

6,查询参数中,需要有值(为了向后端传数据需要):

怎么用Vue+java实现时间段的搜索

JAVA操作:
1,实体类中需要有对应的值接收参数

怎么用Vue+java实现时间段的搜索

2,xml文件中,在list方法中需要处理:

怎么用Vue+java实现时间段的搜索

代码如下:

            <!-- 开始时间检索 创建时间-->            <if test="searchStartTime != null and searchStartTime!='' and searchEndTime != null and searchEndTime!=''">                and  a.create_at BETWEEN to_date(#{searchStartTime},'yyyy-MM-dd HH24:mi:ss') AND to_date(#{searchEndTime},'yyyy-MM-dd HH24:mi:ss')            </if>

读到这里,这篇“怎么用Vue+java实现时间段搜索”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

文章标题:怎么用Vue+java实现时间段的搜索,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/27032

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年9月19日 下午11:53
下一篇 2022年9月19日 下午11:54

相关推荐

  • windows中该内存不能为written如何解决

    该内存不能为written解决方法 一、如果能排除硬件上的原因(内存条不兼容,更换内存。显卡驱动是否正确按装或者是否被恶意覆盖否?)往下看: 二、系统或其它软件引起的,可用下述方法处理: 1.系统本身有问题,及时安装官方发行的补丁,必要时重装系统。 2.病毒问题:杀毒。 3.杀毒软件与其它软件冲突:…

    2022年9月2日
    15000
  • word图片不能全部显示怎么解决

    解决方法: 1、首先新建一个word文档,然后插入图片,此时会发现插入的图片仅显示一小部分。 2、然后将光标位置置于图片的末尾,并右击鼠标,进入“段落”选项。 3、然后需要切换到“缩进与间距”选项卡中。 4、在该选项卡中,将“行距”设置为“单倍行距”,点击保存并退出。 5、此时在进入word查看显示…

    2022年9月20日
    11300
  • css如何实现平行四边形

    平行四边形 #parallelogram { width: 150px; height: 100px; transform: skew(20deg); background: red;} 以上是“css如何实现平行四边形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对…

    2022年8月31日
    5000
  • windows edge浏览器和chrome的优点是什么

    edge浏览器chrome哪个好: 答:新版的edge浏览器更好一点。 在使用JavaScript测试后,edge浏览器以平均值103.5击败了谷歌Chrome,这说明它能够更好地处理开发者遇到的性能问题。 edge浏览器和chrome浏览器的优点: edge浏览器: 1、速度更快 edge浏览器已…

    2022年9月8日
    38200
  • Codeql如何分析cookie未启用httponly的问题

    序 今天我们利用codeql分析下“cookie未启用httponly“这类的安全问题,由此加深自己对codeql的使用。如果反应好的话,可以考虑把Vulnerability-goapp的其他漏洞也弄一弄。 分析go程序时必须额外下载codeql-go 说明 审计对象 Vulnerability-g…

    2022年9月15日
    10800
  • bootstrap如何清除浮动的样式

    在bootstrap中,可以利用“.clearfix”辅助类来清除浮动的样式,辅助类是bootstrap提供的一组工具类,用于辅助项目的开发,只需要给需要清除浮动的元素设置类名为“.clearfix”即可,语法为“<元素 class=”clearfix”>”。 本…

    2022年9月21日
    13200
  • Thinkphp5.0对数据库的操作方法有哪些

    基本使用 查询操作 Db::query(‘select * from think_user where id=?’,[8]); 写入操作 Db::execute(‘insert into think_user (id, name) values (?, ?)’,[8,’thinkphp’]); 查询…

    2022年9月26日
    14200
  • SpringMVC @GetMapping注解路径冲突问题怎么解决

    在SpringMVC的入门学习中,我发现@GetMapping注解的使用要注意路径冲突问题,在网上都没找到类似我这样的情况,所以我在这里将问题分享出来,希望遇到我这样的问题的可以有个参考,但是为什么这样就不行我还没搞懂,希望知道的人可以在评论区或者私信告诉我。问题如下:我的controller层有两…

    2022年9月18日
    16700
  • APT28样本实例分析

    一、 背景 奇幻熊组织又被人们称为APT28,他是俄罗斯的间谍组织,2019年,奇幻熊组织的活动异常频繁。从今年年初的智囊团入侵事件,到随后的大小攻击,都有APT28的身影。奇幻熊的历史已经非常悠久,2016年,该组织因为入侵美国民主党全国委员会的电子邮件,试图影响美国总统大选而闻名于世。鱼叉式网络…

    2022年9月18日
    21500
  • replace如何替换变量数据

    在php中,“preg_replace”函数可以执行一个正则表达式的搜索和替换来替换变量数据,语法为“preg_replace(规定搜索的模式,用于替换的字符串或字符串数组,要搜索替换的目标字符串或字符串数组,字符串的最大可替换次数,替换执行的次数)”;若subject是一个数组则返回的结果是一个数…

    2022年6月27日
    22600
联系我们
站长微信
站长微信
分享本页
返回顶部