Ant design VUE 当我指定了 DatePicker/RangePicker 的 mode 属性后,点击后无法选择年份/月份?
Ant design VUE 的年时间控件无法选中获取值解决方法通过两个openChange 和 panelChange 两个函数解决Ant design 的mode为year 日期控件为展示年 format规定展示的格式 YYYY表示只展示年<a-date-picker mode="year" format="YYYY":open="isopen" /...
·
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;
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)