ant-design-vue中a-date-picker组件只选择年份/含表单验证(已解决)

本文介绍了在ant-design-vue中如何将a-date-picker组件改造为只选择年份,并在a-form-model中进行校验。通过自定义校验规则和在值变化时调用校验方法,解决了非空校验和年份比较的业务需求。同时,分享了在遇到问题时的思考和解决方案。
摘要由CSDN通过智能技术生成

一、ant-design-vue中a-date-picker组件只选择年份

今天遇到了在日期选择器中只选择年份的日期选择器,但是是使用的ant-design-vue,目前还没有只选择年份的日期控件,但是需求还是要实现,上代码:
在template中

<a-form-model-item label="开始年限:" prop="all_plan_one" >
   <a-date-picker 
   mode="year" 
   placeholder="请选择年份" 
   format='YYYY' 
   v-model="addForm.all_plan_one"  
   style="width:100%"
   :open='yearShowOne'  
   @openChange="openChangeOne" 
   @panelChange="panelChangeOne" 
   :disabled="modalDisabled"/>
</a-form-model-item>

在模型数据data中

//年度计划的打开关闭状态,true为打开,false为关闭
yearShowOne:false,
//添加对话框的表单绑定
addForm:{
   
    all_plan_one:null,//开始年限
},

在methods方法中,handleOpenChange回掉函数的参数是boolean值,当打开控件时为true,关闭时为false,但是控制控件的显示和隐藏需要的是open属性,所以让open属性跟随者这个回掉参数改变即可控制面板的显示和隐藏。
handlePanelChange方法可以获取到选择之后的值,在赋值给模型属性就可以使用了。不然会在时期选择之后再页面中不显示获取到的年份。

// 弹出日历和关闭日历的回调
openChangeOne(status){
   
	//status是打开或关闭的状态
    if(status){
   
         this.yearShowOne =  true
     }
 },
// 得到年份选
  • 18
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 16
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值