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