Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解
Vue自定義驗(yàn)證之日期時(shí)間選擇器
自定義驗(yàn)證 今日需求期望效果干貨value-format 效果推薦
今日需求
查詢(xún)條件中 當(dāng)開(kāi)始時(shí)間 和 結(jié)束時(shí)間 一致時(shí) 提示結(jié)束時(shí)間大于開(kāi)始時(shí)間
期望效果
干貨
<el-form :inline="true" :rules="rules"> <el-form-item label="創(chuàng)建時(shí)間" prop="createTime" class="create-time-item"> <el-date-picker v-model="createTime" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" range-separator="至" start-placeholder="開(kāi)始日期" end-placeholder="結(jié)束日期"> </el-date-picker> </el-form-item> </el-form> export default { data () { // 自定義驗(yàn)證規(guī)則 var createTimeCheck = (rule, value, callback) => { if (value === '') { callback() // 回調(diào)函數(shù) } else { let createTimeStart = this.createTime ? this.createTime[0] : '' // 從數(shù)組中取出開(kāi)始時(shí)間 取出結(jié)果:'2020-10-28 16:01:15' let createTimeEnd = this.createTime ? this.createTime[1] : '' // 取出結(jié)束時(shí)間 let sTime = (((createTimeStart.split(' '))[1]).split(':')).join('') // 從 '2020-10-28 16:01:15' 取出時(shí)間 結(jié)果:‘160115' let sDate = (((createTimeStart.split(' '))[0]).split('-')).join('') // 取出開(kāi)始日期 結(jié)果:‘20201028' let endTime = (((createTimeEnd.split(' '))[1]).split(':')).join('') // 取出結(jié)束時(shí)間 let endDate = (((createTimeEnd.split(' '))[0]).split('-')).join('') // 取出結(jié)束日期 if (parseInt(endDate) > parseInt(sDate)) { // 如果結(jié)束日期大于開(kāi)始日期 不用判斷時(shí)間 callback() } else { if (parseInt(endTime) <= parseInt(sTime)) { // 如果結(jié)束日期不大于開(kāi)始日期 判斷結(jié)束時(shí)間是否大于開(kāi)始時(shí)間 callback(new Error('結(jié)束日期必須大于開(kāi)始日期')) } else { callback() } } } } return { createTime: '', // 表單 時(shí)間 雙向綁定值 rules: { // 調(diào)用createTimeCheck 驗(yàn)證 createTime: [ { validator: createTimeCheck, trigger: 'blur' } ] } } }
value-format
效果
注意看 當(dāng)結(jié)束日期比開(kāi)始日期小時(shí) 開(kāi)始日期自動(dòng) 與 結(jié)束日期同步, 所以結(jié)束日期永遠(yuǎn)大于等于開(kāi)始日期
vue項(xiàng)目時(shí)間選擇器
vue項(xiàng)目時(shí)間選擇器 設(shè)置結(jié)束時(shí)間不能早于開(kāi)始時(shí)間,開(kāi)始時(shí)間不能晚于結(jié)束時(shí)間html里面:js里面
設(shè)置結(jié)束時(shí)間不能早于開(kāi)始時(shí)間,開(kāi)始時(shí)間不能晚于結(jié)束時(shí)間
html里面
<el-form-item label="發(fā)布時(shí)間:"> <div class="form_item form_content"> <div> <el-date-picker style="width:180px;" v-model="timerStart" :picker-options="pickerOptionsStart" type="date" placeholder="開(kāi)始日期"></el-date-picker> </div> <div style="margin:0 15px;">-</div> <div> <el-date-picker style="width:180px;" v-model="timerEnd" :picker-options="pickerOptionsEnd" type="date" placeholder="結(jié)束日期"></el-date-picker> </div> </div> </el-form-item>
js里面
<script> export default { data() { return { timerStart: "", //開(kāi)始日期選擇 timerEnd: "", //結(jié)束日期選擇 // 設(shè)置結(jié)束時(shí)間不能早于開(kāi)始時(shí)間 pickerOptionsStart: { disabledDate: time => { const endDateVal = new Date(this.timerEnd).getTime(); if (endDateVal) { return time.getTime() > endDateVal + 1; } } }, pickerOptionsEnd: { disabledDate: time => { const beginDateVal = new Date(this.timerStart).getTime(); if (beginDateVal) { return time.getTime() < beginDateVal + 1; } } } }; } } }, </script>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼
這篇文章主要介紹了vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明
這篇文章主要介紹了前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選,添加購(gòu)物車(chē)功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選,添加購(gòu)物車(chē)功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下2019-12-12vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07vue 對(duì)象添加或刪除成員時(shí)無(wú)法實(shí)時(shí)更新的解決方法
這篇文章主要介紹了vue 對(duì)象添加或刪除成員時(shí)無(wú)法實(shí)時(shí)更新的解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03