需求:
選擇日期範圍,可是選擇範圍須要在一週之內。舉個栗子:假設選第一個日期爲1月17日,那麼1月11日之前、1月23號之後的日期都須要設爲禁選狀態。spa
方法:
考慮到有兩種設計方式:
一、用兩個獨立時間選擇器控制,實現起來比較混亂。
二、用日期範圍選擇器。
第一種方式沒有作demo,有特殊需求的小夥伴請留言。這裏選擇使用日期範圍選擇器,使用起來能夠預見代碼會清爽不少。設計
效果圖:code
代碼:orm
<el-date-picker v-model="datePick" type="daterange" value-format='yyyy-MM-dd' size="small" :picker-options="pickerOptions" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker>
data() { let _minTime = null let _maxTime = null return { datePick: [new Date().format("yyyy-MM-dd") ,new Date().format("yyyy-MM-dd")], //默認選擇當天,看我的需求 pickerOptions:{ onPick(time){ // 若是選擇了只選擇了一個時間 if (!time.maxDate) { let timeRange = 6*24*60*60*1000 // 6天 _minTime = time.minDate.getTime() - timeRange // 最小時間 _maxTime = time.minDate.getTime() + timeRange // 最大時間 // 若是選了兩個時間,那就清空本次範圍判斷數據,以備重選 } else { _minTime = _maxTime = null } }, disabledDate(time) { // onPick後觸發 // 該方法會輪詢當3個月內的每個日期,返回false表示該日期禁選 if(_minTime && _maxTime){ return time.getTime() < _minTime || time.getTime() > _maxTime } } } } }