需求:
选择日期范围,可是选择范围须要在一周之内。举个栗子:假设选第一个日期为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 } } } } }