Element UI 日期选择器禁用问题解决:新增时间后重置 disabledDate
在重新新增时间后,你可以重置日期选择器的disabledDate方法,使其能够重新选择日期。可以通过以下方式实现:
- 在重新新增时间后,通过refs获取到起始日期选择器和结束日期选择器的实例。
- 调用日期选择器实例的
pickerOptions方法,将disabledDate方法重置为空函数。
下面是实现的示例代码:
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="会计期间:" required>
<el-col :span="8">
<el-form-item>
<el-date-picker
ref="startPicker"
clearable
size="mini"
v-model="form.startAccountingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择起始日期"
style="width: 130px"
:picker-options="startPickerOptions"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="2"> ———— </el-col>
<el-col :span="6">
<el-form-item>
<el-date-picker
ref="endPicker"
clearable
size="mini"
v-model="form.endAccountingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择结束日期"
style="width: 130px"
:picker-options="endPickerOptions"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-button @click="addNewTime">新增时间</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
startAccountingTime: '',
endAccountingTime: '',
},
rules: {
startAccountingTime: [
{ required: true, message: '请选择起始日期', trigger: 'blur' },
],
endAccountingTime: [
{ required: true, message: '请选择结束日期', trigger: 'blur' },
],
},
startPickerOptions: {
disabledDate(time) {
return (
time.getTime() >
new Date(this.form.endAccountingTime).getTime()
);
},
},
endPickerOptions: {
disabledDate(time) {
return (
time.getTime() <
new Date(this.form.startAccountingTime).getTime()
);
},
},
};
},
methods: {
addNewTime() {
// 重新设置日期选择器的disabledDate方法为空函数
this.$refs.startPicker.pickerOptions.disabledDate = () => false;
this.$refs.endPicker.pickerOptions.disabledDate = () => false;
// 清空表单数据
this.form.startAccountingTime = '';
this.form.endAccountingTime = '';
},
},
};
</script>
在上面的示例代码中,点击"新增时间"按钮时,会将起始日期选择器和结束日期选择器的disabledDate方法重置为空函数,从而使日期选择器的日期可以重新选择。同时,也会清空表单数据。
原文地址: https://www.cveoy.top/t/topic/qx5N 著作权归作者所有。请勿转载和采集!