使用 Ant Design Vue 的 RangePicker 组件

<template>
  <div>
    <a-form
      :form="searchform"
      layout="inline"
    >
      <a-form-item label="日期">
        <a-range-picker
          :show-time="{ format: 'HH:mm:ss', defaultValue: defaultDate }"
          format="YYYY-MM-DD HH:mm:ss"
          v-decorator="['defaultDate']"
          style="width: 100%"
          :placeholder="['开始时间', '结束时间']"
        />
        <!-- <a-range-picker
          format='YYYY-MM-DD HH:mm:ss'
          v-decorator="['defaultDate', { initialValue : orderInitTime, rules: [{ required: false, message: '请选择' }] }]"
          :ranges="{
                    今天: [moment(), moment()],
                    本周: [moment().startOf('week'), moment().endOf('week')],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                  }"
        /> -->
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      searchform: this.$form.createForm(this),
      defaultDate: [],
      // orderInitTime: [
      //   moment().startOf('month'), moment().endOf('month')
      // ],
    }
  },
  created() {
    this.$nextTick(() => {
      this.initDate()
    })
  },
  methods: {
    moment,
    initDate() {
      this.searchform.setFieldsValue({
        defaultDate: [moment().startOf('month'), moment().endOf('month')],
      })
    },
    submitEvent() {
      const queryData = JSON.parse(JSON.stringify(this.searchform.getFieldsValue()))
      const dateList = queryData.defaultDate
      if (dateList && dateList.length > 0) {
        queryData.createTime = moment(dateList[0]).format('YYYY-MM-DD HH:mm:ss')
        queryData.expireDate = moment(dateList[1]).format('YYYY-MM-DD HH:mm:ss')
        delete queryData.defaultDate
      }
    },
    reset() {
      this.searchform.resetFields()
    },
  },
}
</script>
<style scoped>
</style>