Ant design VUE 的年时间控件无法选中获取值解决方法

通过两个openChange 和 panelChange 两个函数解决
具体参见ant vue 的文档

Ant design 的mode为year 日期控件为展示年 format规定展示的格式 YYYY表示只展示年

<a-date-picker mode="year" format="YYYY"
               :open="isopen" //为定义的日历弹出的状态
                @change="onChange"
                @openChange="handYearChange"
                @panelChange="panelYearChange"
               :value="createValue" placeholder="选择卡片年份"/>

isOpen需要初始化定义在

data () {
	return {
		isopen:false,//为定义的日历弹出的状态 false表示隐藏
		Year:null //用于接收年
	}
}

handYearChange和panelYearChange
需要定义在methods 下面 必须引用moment日期处理类库 具体引用方法如下
onChange用于处理 DatePicker组件allowClear属性设置mode=“year”后allowClear便不起作用 因为onChange事件不会在选择值的时候触发,但是点击清除icon 却会触发。因此通过onChange事件便可以达到清除value的效果

Methods{
	moment, //定义moment
	onChange(){
	  this.createValue=null;
	This.Year =null;
	},
	handYearChange(open){
	     if(open){
	       this.isopen=true
	     } else {
	       this.isopen=false
	     }
	 },
	 panelYearChange(value){
	   this.createValue = value;
	   this.Year=moment(value).format('YYYY'); //接收panelChange返回的值 并用monent格式化时间为年
	
	   console.log(this.Year)
	   this.isopen=false;
	 }
}
Logo

前往低代码交流专区

更多推荐