在重新新增时间后,你可以重置日期选择器的disabledDate方法,使其能够重新选择日期。可以通过以下方式实现:

  1. 在重新新增时间后,通过refs获取到起始日期选择器和结束日期选择器的实例。
  2. 调用日期选择器实例的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方法重置为空函数,从而使日期选择器的日期可以重新选择。同时,也会清空表单数据。

Element UI 日期选择器禁用问题解决:新增时间后重置 disabledDate

原文地址: https://www.cveoy.top/t/topic/qx5N 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录