一般项目中可能会碰到需求:截止日期不能超过 2024-08-30 12:30
,那么我们的日期时间选择器就不能选中该日期之后的时间部分,但是之前的日期是所有时间都能选择的,对此需求配置如下:
<el-date-picker
:picker-options="endTimeOptions"
style="width: 100%;"
format="yyyy/MM/dd HH:mm"
value-format="yyyy/MM/dd HH:mm"
v-model="formData.EndTime"
type="datetime"
></el-date-picker>
endTimeOptions 配置如下:
endTimeLimit:截止时间,题目中提到的2024-08-30 12:30
formData.EndTime:当前表单绑定的时间属性
computed: {
endTimeOptions() {
let targetDate = dayjs(this.endTimeLimit)
let diffDay = dayjs(dayjs(this.formData.EndTime).format('YYYY-MM-DD')).diff(dayjs(dayjs(this.endTimeLimit).format('YYYY-MM-DD')))
//选中的“日期”小于限制“日期”——默认,所有时间能选
let temp = `00:00:00-23:59:59`
if (diffDay == 0) {//选中的“日期”等于限制“日期”
temp = `00:00:00-${dayjs(targetDate).format('HH:mm')}:59`//时间只能限制到,限制日期的时间
}else if(diffDay > 0) {//其他日期时间都不能选
temp = `00:00:00-00:00:00`
}
let obj = {
//禁止选择当前日期后的时间
disabledDate: date => {
if (this.endTimeLimit) {
let currentDate = dayjs(date);
let targetDate = dayjs(this.endTimeLimit);
return currentDate.diff(targetDate, "m") > 0;
}
return false;
},
selectableRange: temp
};
return obj;
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。