Element UI's el-date-picker does time limit
-
Based on the current date , future time cannot be selected.
-
Based on the selected first date , only 7 days can be selected before and after (you can configure a few days by yourself).
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>
The first restriction: based on the current date , the future time cannot be selected.
data(){
return {
//给的默认时间
timeVal: [new Date()- 3600 * 1000 * 24 * 3, new Date()],
pickerOptions: {
disabledDate(time) {
// 这个是当前日期后的日期不可选
return time.getTime() > Date.now()
}
}
}
}
The second limitation: based on the first selected date , only 7 days can be selected before and after (you can configure a few days yourself).
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()
}
},
},
}
}