限制选中当天和昨天或者今天之前,今天之后的日期
示例1:
HTML:
<el-form-item label="开始时间:" prop="startTime">
<el-date-picker
@change="pickerOptionsStart"
v-model="ruleForm.startTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间:" prop="endTime">
<el-date-picker
@change="pickerOptionsEnd"
v-model="ruleForm.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
JS
methods: {
// 开始时间不能大于结束时间
pickerOptionsStart(){
if(Date.parse(this.ruleForm.startTime )>= Date.parse(this.ruleForm.endTime) ){
this.ruleForm.startTime = ''
this.$notify({
title: '警告',
message: '开始时间不能大于结束时间',
type: 'warning'
});
return
}
},
// 结束时间不能小于开始时间
pickerOptionsEnd(){
if(Date.parse(this.ruleForm.endTime )<= Date.parse(this.ruleForm.startTime) ) {
this.ruleForm.endTime = ''
this.$notify({
title: '警告',
message: '结束时间不能小于开始时间',
type: 'warning'
});
}
},
}
示例2
主要:picker-options=“pickerOptions”
<el-date-picker
v-model="queryInfo.time" value-format="yyyy-MM-dd"
type="daterange" range-separator="至" start-placeholder="开始日期"
@change="getData(1, 10)" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
data() {
return {
pickerOptions: {
disabledDate(v) {
// 1、日期禁止选择今天以前的日期
return v.getTime() < new Date().getTime() - 86400000;
//return time.getTime() < Date.now()-1 * 24 * 60 * 60 * 1000
// 2、日期禁止选择今天之后的日期
return v.getTime() > Date.now();
//3、限制只能选当天00:00:00点-12:59:59点其他时间不可选:
const start = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
return time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() + (start - new Date().getTime());
//new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
//获取当天23:59:59的时间戳
//new Date().getTime()
//获取当前时间的时间戳
// 4、日期限制只能选当天和昨天
let limitDate =
v.getTime() < new Date().getTime() - 2 * 86400000 ||
v.getTime() >= Date.now();
// 86400000:一天的毫秒
return limitDate;
}
},
}
}