The antdesignvue time component renderExtraFooter footer cannot close the date panel - resolved

Problem Description:

After using the antdesignvue time component to set a custom footer, it is found that the panel cannot be closed. as the picture shows:

Solution: the following code

<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item label="Activity time" required prop="date1">
      <a-date-picker
        v-model="form.date1"
        type="date"
        placeholder="Pick a date"
        valueFormat="YYYY-MM-DD"
        :showToday="false"
        :open="datePickerShow"
        @openChange="handleDateOpenChange"
      >
        <div slot="renderExtraFooter">
          <a @click.prevent="getPermanentTime">永久有效期</a>
        </div>
      </a-date-picker>
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
      <a-button style="margin-left: 10px;" @click="resetForm">
        Reset
      </a-button>
      <a-button style="margin-left: 10px;" @click="getPermanentTime">
        永久有效期
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        date1: undefined,
      },
      rules: {
        date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
      },
      datePickerShow: false
    };
  },
  watch: {
    'form.date1'(val) {
      if (val) {
        this.datePickerShow = false // 当其有值时动态关闭日期面板
        this.$refs.ruleForm.validateField('date1') // 同时重新进行表单校验
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form.date1,'===');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    getPermanentTime() {
      this.form.date1 = '2099-12-31'
    },
    handleDateOpenChange(status) {
      this.datePickerShow = status
    }
  },
};
</script>