需求:限制时间范围为90天,默认时间为当前时间至当前时间之前的90天的
可选范围:当前时间,或当前时间之间的时间
限制范围:90天
效果图
template部分
<el-date-picker
v-model="time"
ref='timeBox'
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:default-time="pickerDefaultTime"
type="datetimerange"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
script
export defau{
data(){
return {
time:[],
}
},
pickerOptions: {
//时间选择范围
let _this = this
onPick: ({ maxDate, minDate }) => {
let moment = require("moment");
// 把选择的第一个日期赋值给一个变量。
this.choiceDate = minDate.getTime();
// 如果你选择了两个日期了,就把那个变量置空
if (maxDate) {
this.choiceDate = "";
}
if(maxDate && minDate){
let time = new Date();
//两个时间中较大的时间
let endtime = moment(maxDate).format("YYYY-MM-DD");
time=moment(time).format("YYYY-MM-DD");
_this.time = [];
//如果较大的时间是当天,默认显示当前时间
if(endtime==time){
let time1 = new Date();
let start=moment(minDate).format("YYYY-MM-DD HH:mm:ss");
let end=moment(time1).format("YYYY-MM-DD HH:mm:ss");
_this.time[0] = start;
_this.time[1] = end;
this.time=_this.time;
// 关闭--时间控件下拉框
that.$refs.timeBox.handleClose();
}
}
},
disabledDate: time => {
// 如何选择了一个日期
if (this.choiceDate) {
// 7天的时间戳
const one = 90 * 24 * 3600 * 1000;
// 当前日期 - one = 90天之前
const minTime = this.choiceDate - one;
// 当前日期 + one = 90天之后
const maxTime = this.choiceDate + one;
return (
time.getTime() < minTime ||
time.getTime() > maxTime ||
time.getTime() > Date.now()
);
} else {
// 如果没有选择日期,就要限制不能选择今天及以后
return time.getTime() > Date.now();
}
}
}
}
文档说明