需求:控制日期最多只能選擇30天,所以當(dāng)我選擇其中一個日期后织盼,第二個日期選擇只能控制在前后30天(意思就是只有在選擇了一個日期以后杨何,我們才能確定剩下一個日期的選擇范圍)
代碼如下:
<template>
<el-date-picker
@blur="datePickerBlur"
@change="datePickerChange"
v-model="time"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</template>
<script>
// 引入Day.js
import dayjs from 'dayjs'
// 前后需要的天數(shù)-1
const space = 29
// 所選的第一個日期
let _minDate = ''
export default {
name: 'home',
data() {
return {
// 選中時間段(默認(rèn)是近一周)
time: [dayjs().subtract(6, 'day'), dayjs()],
pickerOptions: {
// 設(shè)置禁用狀態(tài)
disabledDate: (time) => {
// 當(dāng)選中第一個時間時
if (_minDate) {
// 最小時間
const min = dayjs(_minDate).subtract(space, 'day')
// 最大時間
const max = dayjs(_minDate).add(space, 'day')
return (
// 控制可以選擇的時間范圍
dayjs(time).isBefore(min) ||
dayjs(max).isBefore(time)
)
} else {
return false
}
},
// 選中日期后會執(zhí)行的回調(diào)
onPick({ minDate }) {
_minDate = minDate
},
},
}
},
methods: {
// 時間 發(fā)生改變時
datePickerChange() {
// 判斷時間段為null時 至空所選的第一個日期(目的是避免類型錯誤的報錯)
if (!this.time) {
_minDate = ''
return
}
},
// 時間 失去焦點(diǎn)時
datePickerBlur() {
// 判斷時間段不為null并且數(shù)組長度為0時 至空所選的第一個日期(目的是避免類型錯誤的報錯)
if (this.time && this.time.length === 0) {
_minDate = ''
}
},
},
}
</script>
ps:dayjs
是一個輕量的處理時間和日期的 JavaScript 庫(如不使用dayjs
也可以自己計算時間酱塔,比較麻煩)
教程:http://www.reibang.com/p/15d6a9c1bf18