element-ui使用el-date-picker日期組件常見場景分析
更新時間：2024年05月10日 09:23:20 作者：南風晚來晚相識
最近一直在使用 element-ui中的日期組件,所以想對日期組件常用的做一個簡單的總結,對element-ui el-date-picker日期組件使用場景分析感興趣的朋友一起看看吧
開始
最近一直在使用 element-ui中的日期組件。
所以想對日期組件常用的做一個簡單的總結；
1.處理日期組件選擇的時候面板聯(lián)動問題
2.限制時間范圍解除兩個日期面板之間的聯(lián)動
解除兩個日期面板之間的聯(lián)動
我們發(fā)現(xiàn)2個日期面板之間其實是有聯(lián)動關系的；
開始時間面板和結束時間面板始終只能相鄰；
不能出現(xiàn)開始時間選擇3月，結束時間是5月這樣的情況；
但是我們有些時候要讓他們之間解除聯(lián)動關系；
我們需要將 unlink-panels 設置為true
unlink-panels:在范圍選擇器里取消兩個日期面板之間的聯(lián)動；
它默認是false;我們設置為true就行
限制-選擇今天以及今天之后的時間
<template>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="開始日期"
end-placeholder="結束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
// time 表示的是面板中每一個日期值
// 只能選擇今天以及今天之后的時間
return time.getTime() < Date.now() - 24*60*60*1000;
}
},
value2: ''
}
}
}
</script>
8.64e7 約等于24小時
有的小伙伴說：我看見有些限制時間是這樣寫的
return time.getTime() < Date.now() - 8.64e7
其實8.64e7 約等于24小時；所以并不會影響
限制-只能選擇今天之后的時間
pickerOptions: {
disabledDate(time) {
// 只能選擇今天之后的時間
// time 表示的是面板中每一個日期值
return time.getTime() < Date.now()
}
},
限制-選擇今天以及今天之前的時間
pickerOptions: {
disabledDate(time) {
// 選擇今天以及今天之前的時間
// time 表示的是面板中每一個日期值
return time.getTime() > Date.now();
}
},
限制-選擇今天之前的時間
pickerOptions: {
disabledDate(time) {
// 選擇今天之前的時間
// time 表示的是面板中每一個日期值
return time.getTime() > Date.now() - 24*60*60*1000;
}
},
限制-選擇當前時間以及當前之前的7天的時間
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="開始日期"
end-placeholder="結束日期"
align="right">
</el-date-picker>
data() {
return {
pickerOptions: {
disabledDate(time) {
// 獲取當前的時間
let currentTime = new Date()
// 重新設置當前時間的 時，分，秒，毫秒
currentTime.setHours(0,0,0,0)
// 得到當前時間 0時0分0秒的時間戳
let endTime = currentTime.getTime()
// 獲取7天前的時間戳
let startTime = endTime - 6*24*60*60*1000
// time表示需要需要禁用的時間
return time.getTime() < startTime || time.getTime() > endTime
},
},
value2: ''
}
}
限制-時間不能超過當前時間,時間跨度不能超過30天
經(jīng)過前面我們的學習，我們可以通過
time.getTime() > Date.now();
來限制時間不能超過當前時間；
時間跨度我們通過 change 事件來判斷開始時間和結束時間是否相差30天
于是我們很快完成了功能
<template>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
@change="changeTime"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="開始日期"
end-placeholder="結束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
// 選擇今天以及今天之前的時間
return time.getTime() > Date.now();
},
},
value2: ''
}
},
methods:{
changeTime(time){
if(time && time.length){
let endTime = time[1].getTime()
let startTime = time[0].getTime()
let limitTime= 30 *24 *60*60*1000
if(endTime - startTime > limitTime){
this.$message.error('選擇的時間不能超過30天');
this.value2 = ''
}
}else {
this.$message.error('請選擇時間');
}
}
}
}
</script>
發(fā)現(xiàn)問題
雖然我們上面的代碼實現(xiàn)了功能；但是用戶體驗不是特別不好；
有沒有這樣的方式：當用戶選擇了5月2號；
只能選擇它的前30天和后30天范圍的時間(4月2號---6.20號)
如果要實現(xiàn)上面這樣的功能：
1.我們要解決面板聯(lián)動，可以使用 unlink-panels 來解決；
2.我們要知道用戶點擊選擇的時間,這樣我們才能知道開始和結束;
這樣問題我們可以使用 onPick: date => { }事件知道點擊選中的時間
3.計算出30天前和30天后的時間
選擇的時間范圍不超過7天(為了好演示)
<template>
<div>
<el-date-picker v-model="myTime" unlink-panels type="datetimerange" range-separator="至"
:picker-options="pickerOptions" start-placeholder="開始日期" end-placeholder="結束日期" align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate: time => {
// this.userSelectDate 可能是 '',不是一個日期對象;
// 這個必須要使用括號哈
// 如果使用 !this.userSelectDate instanceof Date 仍然是false
if (!(this.userSelectDate instanceof Date)) {
return false
} else {
let currentTime = time.getTime()
let userSelectDateTime = this.userSelectDate.getTime()
// 獲取7天前的時間戳
let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
// 獲取7天后的時間戳
let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
// 只能選擇 7天前和7天后
return currentTime > day7AfterTime || currentTime < day7beforeTime
}
},
onPick: date => {
// minDates就是用戶選擇的初始時間，記錄它是為了得到7天前和7天后的時間
console.log('用戶選擇時間就是觸發(fā)', date)
if (date.minDate) {
// 記錄用戶選擇的時間
this.userSelectDate = date.minDate
} else {
this.userSelectDate = null
}
}
},
userSelectDate: '',
myTime:''
}
}
}
</script>
又又發(fā)現(xiàn)了問題
上面雖然友好的實現(xiàn)了限制選擇的時間前后不超過7天；
但是沒有限制選擇的時間【不能】選擇今天之后的時間；
我們需要限制一下；
除了 pickerOptions 中的代碼，其他的與上面的一樣保持不變
選擇的時間范圍不超過7天，同時選擇的時間不能選擇今天之后的時間
pickerOptions: {
disabledDate: time => {
console.log(11111111111)
// 限制不能選擇今天之后的時間
if( Date.now() < time.getTime()){
return true;
}else {
// this.userSelectDate 可能是 '',不是一個日期對象;
// 這個必須要使用括號哈
// 如果使用 !this.userSelectDate instanceof Date 仍然是false
if (!(this.userSelectDate instanceof Date)) {
return false
} else {
let currentTime = time.getTime()
let userSelectDateTime = this.userSelectDate.getTime()
// 獲取7天前的時間戳
let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
// 獲取7天后的時間戳
let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
// 只能選擇 7天前和7天后
return currentTime > day7AfterTime || currentTime < day7beforeTime
}
}
}
},
到此這篇關于element-ui使用el-date-picker日期組件常見場景的文章就介紹到這了,更多相關element-ui el-date-picker日期組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue組件之間的通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了vue組件父子間通信之綜合練習聊天室制作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue中computed與methods的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了mpvue 單文件頁面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎上，通過配置 mpvue-config-loader 來實現(xiàn)在 vue 文件內書寫小程序的頁面配置，感興趣的小伙伴們可以參考一下2018-12-12
vue?codemirror實現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue3項目中代碼出現(xiàn)紅色波浪線的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue.js實現(xiàn)綁定class和style樣式的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要給大家介紹了關于Vue中router-view無法顯示的解決辦法,router-view組件作為vue最核心的路由管理組件,在項目中作為路由管理經(jīng)常被使用到,需要的朋友可以參考下2023-07-07
使用 intro.js這個插件,來實現(xiàn)一個引導性的效果,經(jīng)常在一些新手引導頁遇到這樣的需求,下面通過本文給大家分享vue+intro.js插件實現(xiàn)引導功能,感興趣的朋友一起看看吧2024-06-06
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結與實例分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03