element实现日期范围选择器的范围设置
<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
}
}
}
}
}
本文标题:element实现日期范围选择器的范围设置
本文链接:https://www.haomeiwen.com/subject/glezictx.html
网友评论