首页 > 建站教程 > 前端框架 >  Ant design VUE DatePicker mode=year 选择年份无效正文

Ant design VUE DatePicker mode=year 选择年份无效

1.png


ant design vue 3.x之前,年选择器没有,只能使用a-date-picker日期选择器,将mode设置成year,但是,只能看到效果,并不能实现选择,需要进行下面的改造:

<a-date-picker
:value="year"
mode="year"
format="YYYY"
:open="isopen"
placeholder="选择年份"
@change="onChange"
@openChange="handYearChange"
@panelChange="panelYearChange"
/>


data () {
  return {
    yearString: '',
    isopen:false, // 日历弹出的状态
    year:null // moment格式
  }
}
methods{
  moment,
  // onchange只有在点击清除按钮时触发
  onChange(){
    this.year = null;
   this.yearString = ''
  },
  handYearChange(open){
    if(open){
      this.isopen=true
    } else {
      this.isopen=false
    }
  },
  panelYearChange(value){
    this.year = value
    this.yearString = moment(value).format('YYYY')
   this.isopen = false
  }
}