ant-design vue日期选择封装为年份选择组件

因为ant design vue 里面没有原生的年份选择器，需要使用date-picker去改造

html：

<a-date-picker
 mode="year"
 v-decorator="['year']"
 placeholder="请输入年份"
 format="YYYY"
 style="width: 200px"
 :open="yearShowOne"
@openChange="openChangeOne"
@panelChange="panelChangeOne"
/>

属性说明，mode设置year后选择器面板变成年份选择器，v-decorator 将year交给form控制，format格式化为年（如果在方法里面给v-model或者value、v-decorator绑定的变量都赋值后，回显还是年月日，要看看这个格式化有没有打开），open控制年份选择面板的显示与消失 yearShowOne初始值为false。openChang控制年份选择面板的打开与关闭，panelChange控制面板内选择值的变化

1. mode 用于设置日期组件显示的类型 这里设置为年份

2. ref 设置组件引用

3. fromat 设置年份显示格式

4. placeholder 按情况设置

5. class 组件的类名

6. value 组件值 moment类型

7. locale 组件中文包

8. open 年份组件面板打开状态

9. getCalendarContainer的值是一个函数 作用是决定组件面板挂载的位置 需要return一个el

10 openChange事件是弹出日历和关闭日历的回调

11 panelChange事件是日期面板变化时的回调

12 change事件选择的年份变化的回调

js:

// 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.yearShowOne = false;
      this.year = value;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          year: value,
        });
      });
    },

这里为什么要用form.setFieldsValue在给form监控的year给赋值呢，其实form并没有年份选择器做到真正的监听，这里赋值只是为了，当选择之后有一个回显。同理既然监听不了我们可以试一下value和v-model，都是能够完成的，但是要注意的是v-decorator不能跟他们共同使用。

效果图：

————————————————

版权声明：本文为CSDN博主「胖某人der~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_43468165/article/details/120042544