设置初始值 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>