无初始值的时间选择器

<template>
  <div>
    <a-card>
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="订单类型">
              <a-select v-model="orderType" style="width:100%" allowClear>
                <a-select-option :value="item.orderTypeId" v-for="(item, i) in orderTypeArr" :key="i">
                  {{ item.typeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="起始时间">
              <a-range-picker style="width: 100%" v-decorator="['range']" />
            </a-form-item>
          </a-col>
          <a-col :span="6" class="pt-4">
            <a-button type="primary" @click="search">
              搜索
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="reset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getOrderTypeList } from '@/api/basicdatas/OrderType'
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'acceptance' }),
      orderTypeArr: [],
      orderType: ''
    }
  },
  mounted() {
    getOrderTypeList().then(res => {
      this.orderTypeArr = res.rows
    })
  },
  methods: {
    search() {
      this.form.validateFields((err, fieldsValue) => {
        let query = {}
        console.log(111, err, fieldsValue)
        if (fieldsValue.range && fieldsValue.range.length > 0) {
          query = {
            startTime: fieldsValue['range'][0].format('YYYY-MM-DD'),
            endTime: fieldsValue['range'][1].format('YYYY-MM-DD')
          }
        } else {
          query = {
            startTime: '',
            endTime: ''
          }
        }
        console.log('搜索条件', Object.assign({ orderType: this.orderType || '' }, query))
      })
    },
    reset() {
      this.orderType = ''
      this.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-advanced-search-form .ant-form-item {
  display: flex;
}

/deep/.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}
</style>

需要初始值的时间选择器

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