【JEECGBOOT】VUE日期组件，只选择年份

最新推荐文章于 2025-04-25 08:30:00 发布

原创最新推荐文章于 2025-04-25 08:30:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #算法 #数学建模

当使用AntdesignVue的DatePicker组件并设置mode为year时，年份选择可能无法正常工作。文章提供了一个代码示例，展示如何通过监听和处理onChange、openChange、panelChange事件来正确获取和显示所选年份，同时更新组件状态。

1、代码

2、参考资料

说明：Ant design VUE DatePicker mode=year 选择年份无效，可使用该方法解决。

1、代码

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