ant design vue日期选择器默认初始值加校验踩坑记录

项目需求：form表单提交日期选择器，开始日期默认初始值为当天，截止日期默认初始值为本月最后一天，且不可选择当日之前的时间，提交表单需要校验。

// 正确代码
// date-picker在表单中默认初始值要用initialValue赋值，不要使用defaultValue，否则表单提交获取不到默认值
<template>
	<a-form :form="form" @submit="handleSubmit">
		<a-form-item 
			label="开始时间" 
			:labelCol="labelCol" 
			:wrapperCol="wrapperCol" >
		          <a-date-picker
		            :disabled-date="disabledEndDate"
		            v-decorator="[ 'startTime', 
		            {
    
     
		            initialValue: taskStartTime,
		            rules: [{
    
     required: true, message: '请选择开始时间'}]
		            } 
		           ]"
		          >
		          </a-date-picker>
		</a-form-item>
		<a-form-item 
			label="截止时间" 
			:labelCol="labelCol" 
			:wrapperCol="wrapperCol" >
		     <a-date-picker
			       :disabled-date="disabledEndDate"
			       v-decorator="[ 
			       'endTime', 
			       {
    
    
			       	initialValue: monthDate,  // 初始值通过initialValue赋值
			       	rules: [{
    
     required: true, message: '请选择截止时间'}], 
			       } 
			      ]"
		          >
		    	</a-date-picker>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
	      <a-button type="primary" @click="handleSubmit">
	        提交
	      </a-button>
	    </a-form-item>
	</form>
</template>
import moment from 'moment'
export default {
    
    
	data(){
    
    
		return {
    
    
			form: this.$form.createForm(this, {
    
     name: 'coordinated' }),
			labelCol: {
    
    
		        xs: {
    
     span: 24 },
		        sm: {
    
     span: 5 }
		     },
		    wrapperCol: {
    
    
		        xs: {
    
     span: 24 },
		        sm: {
    
     span: 16 }
	      	},
		    taskStartTime: moment(new Date()).format('YYYY-MM-DD'), //开始日期当天
		    monthDate: '', // 截止日期
		},
		created(){
    
    
			this.getmonthDate()
		},
		methods:{
    
    
			getmonthDate () {
    
    
		      // var monthDate = ''
		      var now = new Date() // 当前日期
		      var nowMonth = now.getMonth() // 当前月
		      var nowYear = now.getFullYear() // 当前年
		      // 本月的开始时间
		      // var monthStartDate = new Date(nowYear, nowMonth, 1)
		      // var yy = monthStartDate.getFullYear() + '-'
		      // var mm =
		      //   (monthStartDate.getMonth() + 1 < 10
		      //     ? '0' + (monthStartDate.getMonth() + 1)
		      //     : monthStartDate.getMonth() + 1) + '-'
		      // var dd =
		      //   monthStartDate.getDate() < 10
		      //     ? '0' + monthStartDate.getDate()
		      //     : monthStartDate.getDate()
		      // 本月的结束时间
		      var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
		      var YY = monthEndDate.getFullYear() + '-'
		      var MM =
		        (monthEndDate.getMonth() + 1 < 10
		          ? '0' + (monthEndDate.getMonth() + 1)
		          : monthEndDate.getMonth() + 1) + '-'
		      var DD =
		        monthEndDate.getDate() < 10
		          ? '0' + monthEndDate.getDate()
		          : monthEndDate.getDate()
		      // monthDate.start_day = yy + mm + dd
		      this.monthDate = YY + MM + DD    // 本月最后一天
		      // return monthDate
		      console.log(this.monthDate)
		    },
		    // 禁止选择当天之前的日期 不包含当天
		    disabledEndDate (current) {
    
    
		        return current && current < moment().subtract(1, 'days') // 当天之前的不可选，不包括当天
		      // return current && current < moment().endOf(‘day') 当天之前的不可选，包括当天
		    },
		    // 表单提交
		    handleSubmit(e) {
    
    
		      e.preventDefault();
		      this.form.validateFields((err, values) => {
    
    
		        if (!err) {
    
    
		          console.log('Received values of form: ', values);
		        }
		      });
		    },
		}
	}