iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue+java实现时间段的搜索示例
  • 365
分享到

Vue+java实现时间段的搜索示例

2024-04-02 19:04:59 365人浏览 薄情痞子
摘要

实现效果如图: 标红的是需要注意的地方!Vue操作:1,如图: 2,如图:(数据初始化) 2.0初始化今天的日期和时间的样式: 2.1今天的日期: // 时间范围–

实现效果如图:

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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,如图:把时间放入对应的值

在这里插入图片描述

5,重置操作需要注意:

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

代码如下:

            <!-- 开始时间检索 创建时间-->
            <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时间段搜索内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue+java实现时间段的搜索示例

本文链接: https://www.lsjlt.com/news/152662.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue+java实现时间段的搜索示例
    实现效果如图: 标红的是需要注意的地方!Vue操作:1,如图: 2,如图:(数据初始化) 2.0初始化今天的日期和时间的样式: 2.1今天的日期: // 时间范围–...
    99+
    2024-04-02
  • 怎么用Vue+java实现时间段的搜索
    本文小编为大家详细介绍“怎么用Vue+java实现时间段的搜索”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么用Vue+java实现时间段的搜索”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实现效果如图:标红...
    99+
    2023-07-02
  • vue实现实时搜索显示功能
    本文实例为大家分享了vue实现实时搜索显示的具体代码,供大家参考,具体内容如下 <template> //绑定搜索的关键字 <input type="text" ...
    99+
    2024-04-02
  • vue怎么实现实时搜索显示功能
    这篇“vue怎么实现实时搜索显示功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现实时搜索显示功能”文章吧。效...
    99+
    2023-06-30
  • Vue实现全局菜单搜索框的示例
    目录前言一、过滤路由二、搜索框展示路由三、雏形出现但有缺陷四、优化搜索方式五、完整代码展示结论前言 本篇文章分享一下我在实际开发 Vue 项目时遇到的需要 —&mdash...
    99+
    2023-02-09
    Vue 全局菜单搜索框 Vue 搜索框
  • Vue实现简单搜索功能的示例代码
    目录1、概述2、功能逻辑2.1功能流程2.2 流程图3、功能实现3.1 vue组件化3.2 代码3.3 动态效果1、概述 在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用...
    99+
    2023-03-19
    Vue实现搜索功能 Vue搜索功能 Vue搜索
  • Java实现二分搜索树的示例代码
    目录1.概念2.重点操作3.完整代码1.概念 a.是个二叉树(每个节点最多有两个子节点) b.对于这棵树中的节点的节点值 左子树中的所有节点值 < 根节点 < 右子树的所...
    99+
    2024-04-02
  • vue elementui 实现搜索栏子组件封装的示例代码
    目录前言需求实现子组件(search.vue)父组件部分主要代码(index.vue)前言 描述: 在基本项目中搜索栏、分页组件格式样式几乎是固定的,只是对应的数据不同,由于模块会随...
    99+
    2024-04-02
  • Android实现高亮搜索功能的示例
    目录首先看效果图:使用方法:1、普通场景使用2、在DataBinding中使用首先看效果图: 整词高亮: 分词高亮: 下面贴上我封的方法 fun stringToHig...
    99+
    2024-04-02
  • Header组件热门搜索栏的实现示例
    目录1. 基本布局1.1 热门搜索框1.2 热门搜索Title和换一换图标1.3 热门Tag2. 控制展示3. 使用 Ajax 请求获取 Tag 数据3.1 使用 redux-thu...
    99+
    2023-05-18
    Header组件热门搜索栏 Header 搜索栏
  • Java创建二叉搜索树,实现搜索,插入,删除的操作实例
    Java实现的二叉搜索树,并实现对该树的搜索,插入,删除操作(合并删除,复制删除)首先我们要有一个编码的思路,大致如下: 1、查找:根据二叉搜索树的数据特点,我们可以根据节点的值得比较来实现查找,查找值大于当前节点时向右走,反之向左走!2、...
    99+
    2023-05-30
    java 二叉搜索树 搜索
  • vue实现两列水平时间轴的示例代码
    目录一、实现组件timelineH.vue 二、调用组件 本文主要介绍了vue实现两列水平时间轴的示例代码,分享给大家,具体如下: 先上图,主要实现两列水平时间轴,查看了很多人实现...
    99+
    2024-04-02
  • Mybatis-Plus根据时间段去查询数据的实现示例
    业务需求:在前端界面选择开始时间、结束时间,后台根据拿到的开始、结束时间去数据库中查询该段时间的数据集返回给前端界面。 1、前端我使用的是elementUI和vue框架,最好是在前...
    99+
    2024-04-02
  • WPF实现带模糊搜索的DataGrid的示例代码
    目录带模糊搜索的DataGrid前端代码 view后端代码 ViewModel带模糊搜索的DataGrid 前端代码 view <Window x:Class="MVV...
    99+
    2023-02-16
    WPF 模糊搜索DataGrid WPF 搜索DataGrid WPF DataGrid
  • vue中的搜索关键字实例讲解
    目录vue的搜索关键字1、定义一个搜索框2、循环遍历,之前3、在data中,我们写入如下数据4、在methods中5、我们还可以这样写搜索功能及搜索结果关键字高亮首先实现搜索功能通过...
    99+
    2024-04-02
  • 简单实现Android端搜索框示例详解
    目录正文一、效果展示二、快速使用及属性介绍快速使用具体代码主要方法介绍1、搜索框监听2、搜索列表点击事件3、改变最近(历史)搜索item背景4、动态设置热门搜索热度属性介绍Searc...
    99+
    2022-11-13
    Android端搜索框 Android 搜索框
  • Java计算两个时间段的差的实例详解
    在本文中,让我们探索各种方法来找出 Java 中两个时间段之间的差异。为简单起见,假设提供给我们的时间段格式为 HH:MM:SS 例子 输入:第一个时间段:- 18:00:00 ...
    99+
    2022-11-13
    Java 计算时间段差
  • Vue实现组件间通信的示例
    这篇文章主要介绍了Vue实现组件间通信的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 父子间通信最常见的就是父子之间的通信,通信是双向的数据传递。1.1 父组件 -...
    99+
    2023-06-15
  • Python通过tkinter实现百度搜索的示例代码
    本文主要介绍了Python通过tkinter实现百度搜索的示例代码,分享给大家,具体如下: """ 百度搜索可视化 """ import tkinter import win...
    99+
    2024-04-02
  • Python实现搜索GoogleScholar论文信息的示例代码
    示例数据 示例代码 import requests from bs4 import BeautifulSoup from tqdm import tqdm from pybtex....
    99+
    2023-03-06
    Python搜索Google Scholar论文信息 Python搜索论文信息 Python Google
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作