解决Ant Design DatePicker 日期组件选中后无法关闭面板弹窗的问题！

1.选择日期后面板不会自动关闭

解决办法：

比如选择年组件，选中后弹窗不会自动关闭

<template>

  <div>

    <!-- 年选择组件 -->

    <a-date-picker

      v-model="year"

      mode="year"

      :allowClear="false"

      format="YYYY"

      placeholder="请选择年份"

      :open="yearPickShow"

      @panelChange="handlePanelChange"

      @openChange="handleOpenChange"

    />

  </div>

</template>

<script>

  export default {

    data() {

      return {

        year: "",

        yearPickShow: false,

      };

    },

    methods: {

      handleOpenChange(status) {

        this.yearPickShow = status;

      },

      handlePanelChange(value) {

        this.year = value;

        this.yearPickShow = false;

      },

    },

  };

</script>

 

 

1.设置 DatePicker 的mode="year"属性，可以实现按年的选择

2.选择完成之后，日期面板不会自动关闭，需要点击一下才行，这样的交与体验不太好

3.借助:open="yearPickShow"控制日期面板的开关，借助@panelChange和@openChange完成选中后的关闭