使用 Ant Design Vue 的 RangePicker 组件

alpha_xiao

已于 2022-03-10 16:58:59 修改

阅读量2.2k

点赞数

文章标签： vue.js elementui javascript

于 2022-02-24 16:23:58 首次发布

本文链接：https://blog.youkuaiyun.com/alpha_xiao/article/details/123114766

版权

本文介绍如何在 Vue 中使用 a-range-picker 插件实现日期范围选择，并展示如何设置默认值和表单验证。着重讲解了如何处理时间格式和清空特定字段的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>