今天拿到的需求是,开始时间与结束时间是固定的,用户只能在这个范围内选择,为了用户体验好点,我选择了把不能选的日期直接置灰这种实现效果。
效果如下:能清楚的看到 2023-01-04 之前的日期都不能选择
当前时间限制 开始范围是2023-01-01 00:00 截至时间是2023-02-28 00:00
代码如下:
<template>
<div>
// ....此处省略其余代码
<el-form-item label="任务截至时间" prop="startTime">
<el-date-picker
:disabled="hasTime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
v-model="form.startTime"
@change="changeTime"
type="datetime"
:picker-options="startTimePicker"
placeholder="请选择开始日期"
>
</el-date-picker>
</el-form-item>
</div>
</template>
<srcipt>
export defalut {
data() {
return {
startTimePicker: {
disabledDate: time => {
// 这个dateTime 是拿到的时间范围值
const [start, end] = this.dateTime
const timer = new Date(time).getTime()
return timer < new Date(start) || timer > new Date(end)
}
},
form: {
startTime: ''
},
dateTime: []
}
}
}
}
</script>
很怕大家看不明白我写的 尽量想写的再详细点