vue2 antd a-range-picker日期组件表单校验

 给表单绑定 prop
给日期组件绑定change事件 , 和value值 , value值是一个数组

 <a-form-model-item label="生效时间"
             prop="createTimeList"
           >

            <a-range-picker
              @change="createTimeChange"
             :value="createTimeList">
              <a-icon slot="suffixIcon" type="smile" />
            </a-range-picker>
          
</a-form-model-item>

 data下方 , return上方,添加自定义校验 ,

data() {
    const timeValidator = (rule, value, callback) => {
      if ( this.createTimeList.length == 0) {
        callback(new Error('请选择生效日期'))
      } else {
        callback()
      }
    }
    return {
    
        createTimeList: [],
        rules: {
        createTimeList:[{ required: true,validator: timeValidator}],
      },
}

触发Change事件 , 这里startTime和endTime是需要给后端传的两个参数
 

    createTimeChange(value) {
      this.createTimeList = value
      if (value.length == 2) {
        this.formData.startTime = value[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.formData.endTime = value[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.formData.startTime = null
        this.formData.endTime = null
      }
    },