本文主要介紹了Vue+java實(shí)現(xiàn)時(shí)間段的搜索示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)現(xiàn)效果如圖：

在這里插入圖片描述

標(biāo)紅的是需要注意的地方！
Vue操作：
1，如圖：

在這里插入圖片描述

2，如圖：(數(shù)據(jù)初始化)

在這里插入圖片描述

2.0初始化今天的日期和時(shí)間的樣式：

2.1今天的日期：

// 時(shí)間范圍–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，時(shí)間的樣式：

     //時(shí)間樣式(出現(xiàn)上面的效果圖)
      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: '最近一個(gè)月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三個(gè)月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

4，如圖：把時(shí)間放入對(duì)應(yīng)的值

在這里插入圖片描述

5，重置操作需要注意：

在這里插入圖片描述

6，查詢參數(shù)中，需要有值(為了向后端傳數(shù)據(jù)需要)：

在這里插入圖片描述

JAVA操作：
1，實(shí)體類中需要有對(duì)應(yīng)的值接收參數(shù)

在這里插入圖片描述

2，xml文件中，在list方法中需要處理：

在這里插入圖片描述

代碼如下：

            <!-- 開始時(shí)間檢索 創(chuàng)建時(shí)間-->
            <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>

到此這篇關(guān)于Vue+java實(shí)現(xiàn)時(shí)間段的搜索示例的文章就介紹到這了,更多相關(guān)Vue java時(shí)間段搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: