antd+vue——实现年份日期选择控件——antd的文档并不明确，自己根据方法处理的内容如下：

今天在写后台管理系统时，遇到一个日期控件的修改，原来是月份选择器，现在要改为年份选择器。

1.月份选择器

<a-month-picker
  placeholder="选择月份"
  v-model="time"
  format="YYYY-MM"
  valueFormat="YYYY-MM"
  @change="onChange($event, 'time')"
/>

1.1 需求：初始化日期为上一个月

此时需要用到moment插件，通过npm进行安装后，main.js中全局引入，然后在页面上使用

import moment from "moment";
export default{
	data(){
		time:moment().format('YYYY-MM')
	}
}

1.2 需求：监听日期的改变，直接调用接口，因此需要change方法

onChange(date, name) {
   if (date&&date.length) {
     let time = date.split("-");
     this.timeObj = {
       Years: time[0],
       Months: time[1],
     };
   } else {
     this.timeObj = {
       Years: "",
       Months: "",
     };
   }
   //根据当前时间调取接口数据
 },

2.年份选择器

如果要改为年份，我以为直接把<a-month-picker>改为<a-year-picker>就可以了，但是发现并没有生效。

下面直接介绍正确的写法：

<a-date-picker
   placeholder="选择年份"
   v-model="time3"
   mode="year"
   :open="open"
   format="YYYY"
   valueFormat="YYYY"
   @openChange="openChange"
   @panelChange="panelChange"
 />

2.1data中定义参数

data(){
	return{
		open:false,
		time3:moment().format('YYYY')
	}
}

2.2 监听年份选择器的改变

 openChange(val){
  if(val){
    this.open = true;
  }else{
    this.open = false;
  }
},
panelChange(val){
  this.time3 = moment(val).format('YYYY');
  this.open = false;
  //调取接口获取数据
},

3.禁用日期——结束日期必须大于开始日期

<a-form-item label="开始日期">
  <a-date-picker
    v-model.trim="listQuery.startDate"
    placeholder="开始日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    allowClear
  >
  </a-date-picker>
</a-form-item>
<a-form-item label="结束日期">
  <a-date-picker
    v-model.trim="listQuery.endDate"
    placeholder="结束日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    :disabled-date="disabledDate"
    allowClear
  >
  </a-date-picker>
</a-form-item>

这边的需求就是：结束日期必须比开始日期大，也就是当有开始日期时，结束日期有禁用日期范围。

disabledDate(current) {
  if (this.listQuery.startDate) {
    return current < moment(this.listQuery.startDate);
  }
},

完成！！！多多积累，多多收获！！！