需求：
選擇日期范圍，但是選擇范圍需要在一周以內(nèi)。舉個栗子：假設(shè)選第一個日期為1月17日，那么1月11日以前、1月23號以后的日期都需要設(shè)為禁選狀態(tài)。
方法：
考慮到有兩種設(shè)計方式：
1、用兩個獨立時間選擇器控制，實現(xiàn)起來比較混亂。
2、用日期范圍選擇器。
第一種方式?jīng)]有做demo，有特殊需求的小伙伴請留言。這里選擇使用日期范圍選擇器，使用起來可以預(yù)見代碼會清爽很多。
效果圖：
代碼：
<el-date-picker v-model="datePick" type="daterange" value-format='yyyy-MM-dd' size="small" :picker-options="pickerOptions" range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期"></el-date-picker>
data() { let _minTime = null let _maxTime = null return { datePick: [new Date().format("yyyy-MM-dd") ,new Date().format("yyyy-MM-dd")], //默認(rèn)選擇當(dāng)天，看個人需求 pickerOptions:{ onPick(time){ // 如果選擇了只選擇了一個時間 if (!time.maxDate) { let timeRange = 6*24*60*60*1000 // 6天 _minTime = time.minDate.getTime() - timeRange // 最小時間 _maxTime = time.minDate.getTime() + timeRange // 最大時間 // 如果選了兩個時間，那就清空本次范圍判斷數(shù)據(jù)，以備重選 } else { _minTime = _maxTime = null } }, disabledDate(time) { // onPick后觸發(fā) // 該方法會輪詢當(dāng)3個月內(nèi)的每一個日期，返回false表示該日期禁選 if(_minTime && _maxTime){ return time.getTime() < _minTime || time.getTime() > _maxTime } } } }}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
