直接上代码:
<el-date-picker size="small"
v-model="nowDate"
@change="getSTime"
type="datetimerange"
range-separator="~"
start-placeholder="请输入开始时间"
end-placeholder="请输入结束时间"
:picker-options="pickerOptions">
</el-date-picker>
时间范围判断:
data(){
return {
pickerOptions: {
disabledDate(time) {
// 设置选择一个月之前到今天的日期
let curDate = (new Date()).getTime()
let oneMonths = curDate - 30 * 24 * 3600 * 1000
// 到今天的时间 或者 小于1个月之前的时间
return time.getTime() > Date.now() || time.getTime() < oneMonths
}
}
}
},
methods:{
getSTime(val) {
this.nowDate = val// 这个sTime是在data中声明的,也就是v-model绑定的值
let startDate = val[0].getTime();
let endDate = val[1].getTime();
let sevenDay = 7 * 24 * 3600 * 1000;
if(startDate + sevenDay < endDate){
this.$message({
message: '结束时间不能大于开始时间7天',
type: 'warning'
});
this.nowDate = [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()];
}
}
}