Element U I的 el-date-picker做时间限制
-
以当前日期为基础,往后的时间不可以选择。
-
以选择的第一个日期为基础,前后只能选择7天(可以自己配置几天)。
el-date-picker
<el-date-picker
v-model="timeVal"
@change="changeDataTime"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
第一种限制:以当前日期为基础,往后的时间不可以选择。
data(){
return {
//给的默认时间
timeVal: [new Date()- 3600 * 1000 * 24 * 3, new Date()],
pickerOptions: {
disabledDate(time) {
// 这个是当前日期后的日期不可选
return time.getTime() > Date.now()
}
}
}
}
第二种限制:以选择的第一个日期为基础,前后只能选择7天(可以自己配置几天)。
data(){
// 不写这一句 disabledDate中的pickerOneDate 会报undifine
var that = this;
return {
//给的默认时间
timeVal: [new Date()- 3600 * 1000 * 24 * 3, new Date()],
// 用于已选择的第一个时间
pickerOneDate: new Date()- 3600 * 1000 * 24 * 3,
pickerOptions: {
// 获取选择的第一个时间
onPick: (obj) => {
// 把第一个时间分配给pickerOneDate
let startDate = new Date(obj.minDate).getTime();;
that.pickerOneDate = startDate;
},
disabledDate(time) {
if (that.pickerOneDate) {
// 自己配置选择几天,我这是6天
const day = 6 * 24 * 3600 * 1000
let maxTime = that.pickerOneDate + day
let minTime = that.pickerOneDate - day
return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() > Date.now()
} else {
// 这个是当前日期后的日期不可选,没有这个需求可删掉
return time.getTime() > Date.now()
}
},
},
}
}