今天在工作時(shí)，后端提出了一個(gè)DatePicker日期范圍組件的一個(gè)問題 用圖描述大概就是選擇開始日期 13 號(hào)后，只能選擇 13 號(hào)前一周和后一周的日期，其他日期處于禁止選擇狀態(tài)。
先去看了下 element 的相關(guān)文檔，找到了一個(gè)當(dāng)前時(shí)間日期選擇器特有的選項(xiàng)picker-options，傳送門文章來源：http://www.zghlxwxcb.cn/news/detail-527892.html
根據(jù)這個(gè)回調(diào)函數(shù)可以拿到點(diǎn)擊的開始時(shí)間是，然后根據(jù)點(diǎn)擊的開始時(shí)間在picker-options中disabledDate中處理需禁用的日期，由于這個(gè)日期是動(dòng)態(tài)不確定的，所以將picker-options放在computed里面去處理，大致下面這個(gè)樣子，可以獲取到data中的數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-527892.html
computed: {
pickerOptions() {
let _this = this
return {
disabledDate(time) {
const times = 86400000 * 7 //一周的毫秒數(shù)
let curSelectTime = new Date(_this.minDate).getTime()
let before = curSelectTime - times //前一周三年毫秒數(shù)
return time.getTime() > after || time.getTime() < before
},
onPick({ maxDate, minDate }) {
console.log('minDate', minDate)
console.log('maxDate', maxDate)
if (!maxDate) {
console.log(123)
_this.minDate = minDate
}
}
}
}
},到了這里，關(guān)于Element UI DatePicker 日期范圍選擇動(dòng)態(tài)設(shè)置禁選日期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
