Vue+java實現時間段的搜尋範例

2022-06-26 14:01:07

實現效果如圖：

標紅的是需要注意的地方！
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時間段搜尋內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue+java實現時間段的搜尋範例

熱門文章