Vue3中element plus默認獲取最近一周和上個月的時間區間并在后端分開傳值

在這里插入圖片描述

 <el-form-item label="結算時間:" prop="datetimerangevalue"><el-date-pickerv-model="datetimerangevalue"value-format="YYYY-MM-DD HH:mm:ss"type="datetimerange"range-separator=""start-placeholder="開始時間"end-placeholder="結束時間" /></el-form-item>
const datetimerangevalue = ref<TypeAny>([])
// 格式化日期函數
const formatDate = (date: Date) => {if (!date) return ''const pad = (n: { toString: () => string }) => n.toString().padStart(2, '0')const year = date.getFullYear()const month = pad(date.getMonth() + 1)const day = pad(date.getDate())const hours = pad(date.getHours())const minutes = pad(date.getMinutes())const seconds = pad(date.getSeconds())return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}// 計算最近一周
const calculateLastWeek = () => {const now = new Date()const endDate = new Date(now)// 從零點到12點開始算起// endDate.setHours(23, 59, 59, 999)const startDate = new Date(now)startDate.setDate(now.getDate() - 6)// startDate.setHours(0, 0, 0, 0)datetimerangevalue.value = [ formatDate(startDate) , formatDate(endDate) ]return [startDate, endDate]
}
// 監聽變化
watch(datetimerangevalue, newVal => {if (newVal && newVal.length === 2) {formModel.select_start_time = String(newVal[0]) formModel.select_end_time = String(newVal[1]) } else {formModel.select_start_time = ''formModel.select_end_time = ''}
})// 組件掛載時設置默認日期
onMounted(() => {const dateRange = calculateLastWeek()// 直接設置表單值formModel.select_start_time = formatDate(dateRange[0])formModel.select_end_time = formatDate(dateRange[1])getData()})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/88317.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/88317.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/88317.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SQLAlchemy數據庫連接密碼特殊字符處理完全指南

引言 在使用SQLAlchemy連接數據庫時&#xff0c;我們通常使用URL格式指定連接信息&#xff0c;如mysqlpymysql://user:passwordhost:port/database。然而&#xff0c;當密碼中包含特殊字符&#xff08;如、#、$、!等&#xff09;時&#xff0c;會導致URL解析錯誤&#xff0c;進…

1.4 ARM安全參考架構(PSA Certified)

目錄1.4.1 PSA Certified概述1.4.2 PSA認證級別詳解1.4.3 PSA與TF-A的關系1.4.4 PSA安全模型實現信任根(RoT)架構關鍵安全服務&#xff1a;1.4.5 認證流程實踐1.4.6 典型應用案例參考資料1.4.1 PSA Certified概述 ARM Platform Security Architecture (PSA) Certified 是一套完…

企業網絡安全的“金字塔”策略:構建全方位防護體系的核心思路

在數字化轉型的浪潮中&#xff0c;企業的網絡安全已從單一的防護措施&#xff0c;發展成為多層次、全方位的安全體系。如何精準應對日益復雜的網絡威脅&#xff0c;成為眾多企業關注的焦點。本文將分享企業構建高效安全防護“金字塔”的核心思路。一、從“排查隱患”到“主動防…

爬蟲-request模塊使用

1.使用和安裝2.代碼測試打印返回的內容&#xff0c;默認是請求體中的標識.text 是打印源代碼設置一下編碼

HTML + CSS + JavaScript

目錄 1 HTML HTML 文件基本結構 HTML 開發工具 HTML 常見標簽 標題標簽&#xff1a;h1 - h6 段落標簽&#xff1a;p 換行標簽&#xff1a;br 圖片標簽&#xff1a;img 超鏈接標簽&#xff1a;a 表格標簽 表單標簽 form 標簽 input 標簽 select 標簽 textarea 標…

Java 與 MySQL 性能優化:MySQL連接池參數優化與性能提升

文章目錄引言一、連接池的基本概念與作用二、關鍵連接參數詳解2.1 max_connections2.2 wait_timeout2.3 interactive_timeout2.4 connect_timeout2.5 thread_cache_size三、連接池參數不合理導致的性能問題3.1 連接耗盡3.2 響應變慢3.3 連接失效3.4 資源浪費四、連接池參數優化…

浪潮CD1000-移動云電腦-RK3528芯片-2+32G-開啟ADB ROOT破解教程

浪潮CD1000-移動云電腦-RK3528芯片-232G-安卓9-開啟ADB ROOT破解教程破解教程&#xff1a;1.先下載好開心電視助手&#xff08;下載地址及其他版本&#xff1a;【工具大全】-【開心電視助手3.8&#xff0f;4.0&#xff0f;4.6&#xff0f;6.0&#xff0f;6.2&#xff0f;6.3&am…

【網絡編程】簡易的 p2p 模型,實現兩臺虛擬機之間的簡單點對點通信,并以小見大觀察 TCP 協議的具體運行

文章目錄基本概念業務拆解代碼實現準備工作實現被動的功能——多線程指針函數實現主動的功能——用戶選擇界面主函數代碼執行效果意外收獲總結推薦一個零聲教育學習教程&#xff0c;個人覺得老師講得不錯&#xff0c;分享給大家&#xff1a;[Linux&#xff0c;Nginx&#xff0c…

react狀態管理庫 - zustand

什么是zustand&#xff1f; zustand 是一個輕量級、快速且可擴展的 React 狀態管理庫&#xff0c;旨在提供一種簡單直接的方式來管理應用狀態&#xff0c;而無需其他解決方案通常伴隨的繁瑣代碼。根據官方 Zustand 文檔&#xff0c;Zustand 是“一個使用簡化 flux 原理的小型、…

粗排樣本架構升級:融合LTR特征提升模型性能的技術實踐

粗排樣本架構升級&#xff1a;融合LTR特征提升模型性能的技術實踐 ——基于PySpark的樣本構建與特征工程深度解析 一、粗排系統的定位與技術演進 在推薦系統級聯架構中&#xff0c;?粗排&#xff08;Rough Ranking&#xff09;?? 承擔著關鍵過渡角色&#xff1a;從召回層獲…

CCF-GESP 等級考試 2025年6月認證C++四級真題解析

1 單選題&#xff08;每題 2 分&#xff0c;共 30 分&#xff09;第1題 在C中&#xff0c;聲明一個指向整型變量的指針的正確語法是&#xff08; &#xff09;。A. int* ptr; B. *int ptr; C. int ptr*; D. ptr …

PlantUML 在 IDEA 中文版中的安裝與使用指南

目錄 摘要 一、安裝 PlantUML 插件 二、配置 PlantUML 運行環境 三、創建 PlantUML 文件 四、編寫 PlantUML 代碼 五、生成并查看圖表 六、自動生成類圖&#xff08;重點新增&#xff09; 6.1 從 Java 類生成類圖 6.2 類圖語法詳解 6.3 類圖高級技巧 七、常見問題及…

創客匠人:創始人 IP 打造中 “放下身段” 的深層邏輯

在 IP 經濟火熱的當下&#xff0c;無數創始人投身 IP 打造&#xff0c;卻鮮少有人意識到&#xff1a;真正能實現 IP 變現的核心&#xff0c;并非專業知識的堆砌&#xff0c;而是與用戶建立 “可交往” 的連接。創客匠人通過多年服務 IP 的實踐發現&#xff0c;那些穿越周期的創…

C語言<數據結構-鏈表>

鏈表是一種常見且重要的數據結構&#xff0c;在 C 語言中&#xff0c;它通過指針將一系列的節點連接起來&#xff0c;每個節點可以存儲不同類型的數據。相比數組&#xff0c;鏈表在插入和刪除元素時不需要移動大量數據&#xff0c;具有更好的靈活性&#xff0c;尤其適合處理動態…

基于Matlab多特征融合的可視化指紋識別系統

針對中小規模&#xff08;百級&#xff09;指紋模板庫中常見的脊線斷裂、噪聲干擾以及結果缺乏可解釋性等難點&#xff0c;本文提出并實現了一種基于多特征融合的可視化指紋識別系統。系統整體采用模塊化設計&#xff1a;在預處理階段&#xff0c;先通過改進的灰度歸一化與局部…

50天50個小項目 (Vue3 + Tailwindcss V4) ? | DoubleVerticalSlider(雙垂直滑塊)

&#x1f4c5; 我們繼續 50 個小項目挑戰&#xff01;—— DoubleVerticalSlider組件 倉庫地址&#xff1a;https://github.com/SunACong/50-vue-projects 項目預覽地址&#xff1a;https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API&#xff08;<scrip…

mysql join語句、全表掃描 執行優化與訪問冷數據對內存命中率的影響

文章目錄join執行邏輯Index Nested_Loop Join&#xff08;NLJ&#xff09;MMR(Mutli-Range Read) 優化BKA(Batched Key Access)算法Simple Nested_Loop JoinBlock Nested-Loop Join&#xff08;BLJ&#xff09;join buffer 一次放不下 驅動表join buffer優化的影響&#xff1a;…

【LeetCode100】--- 1.兩數之和【復習回滾】

題目傳送門 解法一&#xff1a;暴力枚舉&#xff08;也是最容易想到的&#xff09; class Solution {public int[] twoSum(int[] nums, int target) {int n nums.length;for(int i 0; i < n; i){for(int j i1; j<n; j){if(nums[i] nums[j] target){return new int…

opencv提取png線段

import cv2 import matplotlib.pyplot as plt import numpy as np# 讀取圖像 image cv2.imread(./data/1.png) if image is None:print("無法讀取圖像文件") else:# 轉換為灰度圖像gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用Canny邊緣檢測edges cv2.Can…

計算機網絡:概述層---計算機網絡概念解析

計算機網絡的概念詳解 &#x1f4c5; 更新時間&#xff1a;2025年07月6日 &#x1f3f7;? 標簽&#xff1a;計算機網絡 | 網絡基礎 | 互聯網 | TCP/IP | 路由器 文章目錄前言一、計算機網絡的發展歷程二、什么是計算機網絡&#xff1f;1. 計算機網絡的基本功能2. 計算機網絡的…