AntDesign年度日期选择框_ant design 年份选择框-CSDN博客

本文链接：https://blog.csdn.net/qq_38948398/article/details/108145454

项目中我们各种日期选择都会用到，这里介绍项目中使用Antdesign-vue框架的日期选择框遇到的问题

官方示例控件中没有年度选择的示例，这里总结了网上的网友提到的一些api，做出来的效果，发下效果图

官方文档提供了一个mode属性控制时间类型，但是mode设置为YYYY后，你会发现面板无法操作，官方对此也做了介绍

原因这里也说明了，然后说说我的实现过程

<a-form-item label="年度:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  <a-date-picker v-decorator="['year', {
        rules: [{ type: 'object', required: true, message: '请选择年度时间!!' }],
      }]"
         :open="isopen"
         placeholder="请选择年度"
         mode="year"
         format="YYYY"
         @openChange="openmodel"
         @panelChange="updateTime"
         @change="clearTime"
         />
</a-form-item>

这里用到了一个变量isopen控制面板开关，三个事件函数openmodel、updateTime、clearTime，分别是面板开关函数，以及面板日期更改函数，清除日期时间函数

// 打开时间面板
openmodel(status) {
  if (status) {
    this.isopen = true;
  } else {
    this.isopen = false;
  }
},
// 更改时间面板
updateTime(val) {
  this.form.setFieldsValue({
     "year": val
  })
  this.isopen = false;
},
// 清除时间
clearTime() {
  this.form.setFieldsValue({
     "year": null
  })
},

,当然官方也说了，计划在antdesign-vue@2.0中加入示例组件，如果你等不及的话，可以在自己的项目中对antdesign框架的组件进行二次封装,这也是一个对当下最好的方式。