这篇博客介绍了如何在前端使用El-DatePicker组件来设置开始时间和结束时间的禁用日期范围。通过v-model绑定数据，并在计算属性中定义startTimeOptions和endTimePicker，根据formData中的startTime和stopTime动态计算禁用日期，确保开始时间不能早于当前时间，结束时间不能晚于或等于开始时间。此实现有助于防止用户选择无效的时间范围。
<el-form-item label="开始时间">
<el-date-picker
v-model="formData.startTime"
type="date"
:picker-options="startTimeOptions"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="formData.stopTime"
:picker-options="endTimePicker"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
computed:{
startTimeOptions(){
let _this = this;
return {
disabledDate(time) {
let licenseEnd = new Date(_this.formData.stopTime);
licenseEnd.setDate(licenseEnd.getDate());
return (
time.getTime() > licenseEnd.getTime() ||
time.getTime() < Date.now()
);
},
};
},
endTimePicker() {
var _this = this;
return {
disabledDate(time) {
let licenseStart = new Date(_this.formData.startTime);
licenseStart.setDate(licenseStart.getDate());
return (
time.getTime() < licenseStart.getTime()- 3600 * 1000 * 24 ||
time.getTime() < Date.now()
);
},
};
},
},
扫一扫
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
