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

最新推荐文章于 2025-03-19 16:10:00 发布

一羊迁徙

最新推荐文章于 2025-03-19 16:10:00 发布

阅读量1.3w

点赞数 18

分类专栏： ant-design-vue

本文链接：https://blog.csdn.net/weixin_43242112/article/details/106688823

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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
     }
 },
// 得到年份选择器的值

最低0.47元/天解锁文章