
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
}
}