AntDesign Vue 中时间段选择器a-range-picker

设置初始值 initialValue，如果初始值是异步获取或是参数携带过来的可使用设置功能来赋值初始值，如果是死的可用initialValue

<template>
  <div>
    <a-form :form="form">
      <a-form-item label="RangePicker">
        <a-range-picker v-decorator="['rangetime',{initialValue:defaultTime}]" @change="onChangeRangeDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"/>
      </a-form-item>
      <a-button type="primary" @click="submit">
        提交
      </a-button>
      <a-button type="primary" @click="reset">
        重置
      </a-button>
      <a-button type="primary" @click="modify">
        修改
      </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import moment from 'moment'
export default {
    
    
  data () {
    
    
    return {
    
    
      defaultTime: [moment('2021-05-13', 'YYYY-MM-DD'), moment('2021-05-18', 'YYYY-MM-DD')],
      start: '2021-05-13',
      end: '2021-05-18',
      form: this.$form.createForm(this, {
    
     name: 'time_related_controls' })
    }
  },
  mounted () {
    
    

  },
  methods: {
    
    
    moment,
    // 监听选择框改变
    onChangeRangeDate (value, dateString) {
    
    
      console.log(dateString)
      this.start = dateString[0]
      this.end = dateString[1]
    },
    // 重置时间为空
    reset () {
    
    
      this.form.setFieldsValue({
    
    
        'rangetime': []
      })
      this.start = ''
      this.end = ''
    },
    // 设置时间
    modify () {
    
    
      this.form.setFieldsValue({
    
    
        'rangetime': [moment('2021-05-22'), moment('2021-05-28')]
      })
      this.start = '2021-05-22'
      this.end = '2021-05-28'
    },
    // 提交获取时间
    submit () {
    
    
      this.form.validateFields((err, values) => {
    
    
        console.log('Received values of form: ', err, values)
        console.log(this.start, this.end)
      })
    }
  }
}
</script>