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

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

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

<a-date-picker mode="year"
		placeholder="请选择年份" 
		format='YYYY'
 		:value='yearPick'
        :open='yearPickShow' 
        @panelChange="handlePanelChange"
        @openChange="handleOpenChange"/>

在模型数据data中

yearPick:null,//年选择器的值
yearPickShow:false,//年选择器的显示隐藏

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

// 弹出日历和关闭日历的回调
        handleOpenChange(status){
            console.log(status,'============')
                this.yearPickShow =  status
        },
        // 得到年份选择器的值
        handlePanelChange(value){
            this.yearPick = value
            this.yearPickShow = false
        }

ant-design-vue文档提供的文章
但是我不知道怎么在a-form-model中使用目前这个年选择控件，这两天还在研究当中，反正头有点大…有大佬知道在a-form-modal中如何做该年份选择器的非空校验或自定义校验吗？研究了好久，没有得到正解。经过研究，目前的情况是这样的，在ant中，触发检验规则只有在blur或者change时才可以触发，但是当前年份控件并不会触发这两个事件，当前的年份控件只有在点击allowClear图标时才会触发change事件，我的想法是在面板关闭时获取该图标，手动调用click事件，可是又出现了无法获取的情况。有大佬知道该解决方案的话，求指教。

二、在a-form-model中验证

如果已经使用过普通的表单验证的道友应该已经知道无法对该年份控件进行验证，例如说非空校验等，在此我就不进行普通的校验失败演示，直接说我的方法，已经困扰了我几天，我一直困在如何触发change事件中出不来，今天得以高人提点，整个过程中在可以触发什么回调就在那里验证！简直醍醐灌顶，遂问题得以解决。
话不多说，先看效果：

1、在校验规则中添加对该字段的校验规则

all_plan_one:[{required: true, message: '总体计划不能为空', trigger: 'change'}],

2、在得到值的时候调用该字段的校验方法

// 得到年份选择器的值
        panelChangeOne(value){
            this.addForm.all_plan_one = value
            this.yearShowOne = false
            this.$refs.addFormRef.validateField('all_plan_one',(error)=>{
                console.log(error)
            })
        },

只要是值改变都会调用该方法，所以在这里对该字段进行校验，validateField是ant官方提供的对单给字段进行校验的方法，如果没有了解过的建议翻翻官方提供的文档：ant-a-form-modal-api
问题得以解决。

3、对年限的自定义校验规则

对年限的非空校验已经解决，但是又遇到了稍微复杂的业务需求，如果有两个年限，选择第一个年限之后，第二个年限不能小于第一个年限那又该怎么做呢？还是一样，先上效果图：

其实思想还是一样 的，先添加该校验规则，在值改变的回调中去触发该字段的校验，也是单个字段校验。
1、在rules中添加结束年限的规则

 all_plan_two:[{required: true, message: '结束年限不能为空', trigger: 'change'},
       {validator:this.validatorPlanTwo},
    ],

2、自定义校验规则

validatorPlanTwo(rule, value, callback){
           validatorPlanTwo(rule, value, callback){
            // 当且仅当结束年限有值，并且已经选了开始年限，才进行校验
            if(value && this.addForm.all_plan_one){
                // 使用momentjs对结束时间进行转换
                let planTwo = this.$moment(value).format('YYYY-MM-DD');
                // 开始时间
                let planOne = this.$moment(this.addForm.all_plan_one).format('YYYY-MM-DD');
                // 当开始时间大于结束时间时，不通过校验
                if(planOne > planTwo){
                    callback(new Error('开始年限不能大于结束年限'));//校验不通过结束当前校验
                    return false;
                }else{
                    callback();//cb必须被调用
                }
            }else{
                callback();//校验通过，cb必须被调用
            }
        },

这里的函数名需要和校验规则制定函数名对应，如果不明白自定义校验规则的可以看我的另外一篇针对ant-vue的自定义规则文章：ant-design-vue表单自定义校验规则
那在这里为何又使用到了momentjs呢？大家还可以看我另外一篇文章，链接附上：ant-design-vue中a-date-piker日期选择器的使用/全局汉化(详细)
3、在获取值时调用单字段校验

 panelChangeTwo(value){
            this.addForm.all_plan_two = value
            this.yearShowTwo = false
            this.$refs.addFormRef.validateField('all_plan_two',(error)=>{
                console.log(error)
            })
        },

4、注意事项
在这里需要注意的是，现在是深夜1.42，如果可以帮到各位道友，欢迎点个赞，也算是对我深夜吐血整理的一个鼓励！
路漫漫，何时能把坑填完，最近使用ant-design-vue这个UI库进行项目开发，有问题欢迎大家一起交流。