el-date-picker手動輸入日期,通過設置開始時間和階段自動填寫結束時間

需求:根據開始時間,通過填寫階段時長,自動填寫結束時間,同時開始時間和節數時間可以手動輸入

代碼如下:

 <el-form ref="ruleForm2" :rules="rules2" :model="formData" inline label-position="right" label-width="120px"> <el-form-item label="開始時間" prop="beginTime"><el-date-pickerv-model="formData.beginTime"v-elDateFormateditablevalue-format="timestamp"type="date"placeholder="請選擇日期"clearablestyle="width: 180px"@change="changeEndTime"/></el-form-item><!-- 添加一個階段時長 --><el-form-item label="階段時長" prop="stageDuration"><el-input v-model="formData.stageDuration" style="width: 180px"  @blur="stageDurationBlur" /><span class="span_style">(最小單位半月)</span></el-form-item><el-form-item label="結束時間" prop="endTime"><el-date-pickerv-model="formData.endTime"v-elDateFormateditablevalue-format="timestamp"type="date"placeholder="請選擇日期"clearablestyle="width: 180px"/></el-form-item>
</el-form>

?

    changeEndTime(time) {
//這里是項目的一個判斷 與主體邏輯無關if (this.formData.stageNature == 'point') {// this.formData.endTime = this.timestampToYYYYMMDD(time)this.formData.endTime = time} else {this.calculateEndDate()}},stageDurationBlur(e) {if (this.formData.stageNature !== 'point' && this.formData.beginTime &&             e.target.value) {this.calculateEndDate()}},calculateEndDate() {if (this.formData.beginTime && this.formData.stageDuration) {const beginTime = new Date(this.formData.beginTime)const duration = parseFloat(this.formData.stageDuration)if (!isNaN(duration) && duration > 0) {const daysToAdd = Math.floor(duration * 15) // 將輸入的值乘以15天const endTime = new Date(beginTime)endTime.setDate(beginTime.getDate() + daysToAdd)this.formData.endTime = endTime.getTime()} else {this.formData.endTime = ''}}},

?

手動輸入日期,默認回顯日期功能,我這邊后端參數需要的是時間戳,使用時需要看清楚后端需要的數據類型

  watch: {formData: {handler(newValue, oldValue) {if (newValue.beginTime && newValue.beginTime != '') {// 判斷有沒有橫杠  輸入的日期 格式是 2024-07-15的,或者是20240715這種 if (typeof newValue.beginTime === 'string' && newValue.beginTime.indexOf('-') == -1) {let str = newValue.beginTimeconst positions = [4, 6]const char = '-'for (let i = positions.length - 1; i >= 0; i--) {const position = positions[i]str = str.substring(0, position) + char + str.substring(position)}this.formData.beginTime = str}} else {this.formData.beginTime = ''}},immediate: true,deep: true}},

效果圖:

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

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

相關文章

B樹與B+樹的區別

B樹和B樹都是用于數據庫和文件系統的平衡樹數據結構&#xff0c;但它們有一些顯著的區別&#xff1a; 節點結構&#xff1a; B樹&#xff1a;每個節點存儲數據和指向子節點的指針。葉子節點也包含數據。 B樹&#xff1a;內部節點只存儲索引值&#xff0c;不存儲實際數據。所有…

yolov5 上手

0 介紹 YOLO(You Only Look Once)是一種流行的物體檢測和圖像分割模型&#xff0c;由華盛頓大學的約瑟夫-雷德蒙&#xff08;Joseph Redmon&#xff09;和阿里-法哈迪&#xff08;Ali Farhadi&#xff09;開發。YOLO 于 2015 年推出&#xff0c;因其高速度和高精確度而迅速受到…

人工智能算法工程師(中級)課程13-神經網絡的優化與設計之梯度問題及優化與代碼詳解

大家好&#xff0c;我是微學AI&#xff0c;今天給大家介紹一下人工智能算法工程師(中級)課程13-神經網絡的優化與設計之梯度問題及優化與代碼詳解。 文章目錄 一、引言二、梯度問題1. 梯度爆炸梯度爆炸的概念梯度爆炸的原因梯度爆炸的解決方案 2. 梯度消失梯度消失的概念梯度…

vue2中父組件向子組件傳值不更新視圖問題解決

1. 由于父組件更新了props里面的值, 但是子組件第一次接收后再修改沒有監聽到. 父組件修改值的時候使用this$set解決問題. 在 Vue 2 中&#xff0c;this.$set 通常用于更新數組中的特定元素。如果你想更新整個數組&#xff0c;可以直接賦值一個新的數組&#xff0c;或者你可以…

powerdesigner導出表數據庫設計文檔excel

1、連接數據庫&#xff0c;導出表結構的sql腳本 2、打開powerdesigner&#xff0c;生成項目空間表 sql腳本用第一步的腳本 3、用script腳本生成excel 腳本信息 Option Explicit Dim rowsNum rowsNum 0 -------------------------------------------------------------…

CV12_ONNX轉RKNN模型(諦聽盒子)

暫時簡單整理一下&#xff1a; 1.在邊緣設備上配置相關環境。 2.配置完成后&#xff0c;獲取模型中間的輸入輸出結果&#xff0c;保存為npy格式。 3.將onnx格式的模型&#xff0c;以及中間輸入輸出文件傳送到邊緣設備上。 4.編寫一個python文件用于轉換模型格式&#xff0c…

Git---git本地配置commit_template提交模板,規范開發

如何在Git中配置Commit Template以規范開發 在軟件開發過程中&#xff0c;規范化的提交信息&#xff08;commit messages&#xff09;對于項目的可維護性和協作效率至關重要。Git 提供了配置 commit template 的功能&#xff0c;允許開發者預設一個模板&#xff0c;用于在提交…

[iOS]內存分區

[iOS]內存分區 文章目錄 [iOS]內存分區五大分區棧區堆區全局區常量區代碼區驗證內存使用注意事項總結 函數棧堆棧溢出棧的作用 參考博客 在iOS中&#xff0c;內存主要分為棧區、堆區、全局區、常量區、代碼區五大區域 還記得OC是C的超類 所以C的內存分區也是一樣的 iOS系統中&a…

51單片機STC89C52RC——19.1 SG90舵機(伺服電機)

目的/效果 獨立按鍵K1&#xff0c;K2 實現加舵機減角度增減&#xff0c;LCD1602顯示舵機轉角度數&#xff08;上電默認90度&#xff09; 一&#xff0c;STC單片機模塊 二&#xff0c;SG90舵機 2.1 簡介 舵機只是我們通俗的叫法&#xff0c;它的本質是一個伺服電機&#xf…

react 案例的實現

先看一下如下效果 效果 這是一個 簡單的 效果 左邊是用戶名進行登錄 右邊是一個答題還有遮罩 相信大家還有剛剛創建好的 react 腳手架了&#xff0c;沒有的話可以運行以下命令 creact-react-app 項目名稱 把項目名稱四個字 改成 自己想要的一個名字 最好是英文的在 App.js中去…

python xpath常用代碼功能

1、從文件中讀取html內容&#xff0c;然后xpath加載 with open(FilePath, r,encodingutf8) as file:html file.read() tree etree.HTML(html) 2、基本定位語法 / 從根節點開始選取 /html/div/span // 從任意節點開始選取 //input . 選取當前節點 .…

Web開發:<br>標簽的作用

br作用 介紹基本用法常見用途注意事項使用CSS替代 介紹 在Web開發中&#xff0c;<br> 標簽是一個用于插入換行符的HTML標簽。它是“break”的縮寫&#xff0c;常用于需要在文本中強制換行的地方。<br> 標簽是一個空標簽&#xff0c;這意味著它沒有結束標簽。 基本…

Python小工具—txt轉excel和word

1.txt轉excel import openpyxl# 創建一個新的Excel工作簿 wb = openpyxl.Workbook() sheet = wb.active# 題干和答案的標題 sheet[A1] = 題干 sheet[B1] = 答案# 打開txt文件并讀取內容 with open(xiti.txt, r, encoding=utf-8) as file:lines = file.readlines()# 初始變量 c…

VisualTreeHelper.GetChildrenCount

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;VisualTreeHelper.GetChildrenCount 是一個非常有用的方法&#xff0c;用于獲取指定視覺對象的子元素數量。這對于遍歷復雜的用戶界面樹結構以進行查找、操作或檢查特定元素是非常有幫助的。 Visu…

【java深入學習第7章】用 Spring Boot 和 Java Mail 輕松實現郵件發送功能

引言 在現代的企業應用中&#xff0c;郵件發送是一個非常常見的功能。無論是用戶注冊后的驗證郵件&#xff0c;還是系統通知郵件&#xff0c;郵件服務都扮演著重要的角色。本文將介紹如何在Spring Boot項目中整合Java Mail&#xff0c;實現發送郵件的功能。 一、準備工作 在…

【Ubuntu】安裝使用pyenv - Python版本管理

當我們在Ubuntu上使用Python進行開發的時候&#xff0c;可能會遇到版本不兼容的問題&#xff0c;當然你可以選擇使用apt的方式安裝不同版本的python環境 但是存在一定的問題&#xff1a;安裝不同版本的Python通常不會改變默認的python3命令指向的版本&#xff0c;而且就算你進行…

分布式對象存儲minio

本教程minio 版本&#xff1a;RELEASE.2021-07-*及以上 1. 分布式文件系統應用場景 互聯網海量非結構化數據的存儲需求 電商網站&#xff1a;海量商品圖片視頻網站&#xff1a;海量視頻文件網盤 : 海量文件社交網站&#xff1a;海量圖片 1.1 Minio介紹 MinIO 是一個基于Ap…

ubuntu服務器部署vue springboot前后端分離項目

上傳構建好的vue前端文件 vscode構建vue項目&#xff0c;會生成dist目錄 npm run build在服務器root目錄新建/projects/www目錄&#xff0c;把dist目錄下的所有文件&#xff0c;上傳到此目錄中 上傳ssl證書 上傳ssl證書到/projects目錄中 配置nginx 編輯 /etc/nginx/site…

微服務邊界守衛:Eureka中服務隔離策略的實現

微服務邊界守衛&#xff1a;Eureka中服務隔離策略的實現 在微服務架構中&#xff0c;服務隔離是一項關鍵策略&#xff0c;用于確保服務之間的故障不會相互影響&#xff0c;同時提供更加安全和穩定的運行環境。Eureka作為Netflix開源的服務發現框架&#xff0c;提供了一些機制來…

Java 網絡協議面試題答案整理,最新面試題

TCP和UDP的主要區別是什么? TCP(傳輸控制協議)和UDP(用戶數據報協議)的主要區別在于TCP是面向連接的協議,而UDP是無連接的協議。這導致了它們在數據傳輸方式、可靠性、速度和使用場景方面的不同。 1、連接方式: TCP是面向連接的協議,數據傳輸前需要三次握手建立連接。U…