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

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

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


上一篇:计算机网络-TCP篇


下一篇:哈哈!TCP泄露了操作系统信息···