antv-design写了一个选择时间范围的组件

原创

已于 2023-08-30 16:00:17 修改 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datepicker #a-range-picker

于 2021-10-26 17:41:50 首次发布

该博客展示了如何使用Vue.js实现一个时间过滤组件，包括昨日、近7日、近30日和全年的日期选择功能。通过<a-checkable-tag>和<a-range-picker>组件，用户可以方便地切换和定制时间范围，并触发相应的搜索操作。代码中还包含了日期格式化、时间范围限制以及禁用未来日期的选择功能。

方式一：在这里插入图片描述

方式二：
在这里插入图片描述

<template>
  <div class="timeFilter">
    <a-row>
      <a-col
        :span="12">
        <a-checkable-tag
          v-model="date.checked1"
          @change="handleChange('yesterday')">
          昨日
        </a-checkable-tag>
        <a-checkable-tag v-model="date.checked2" @change="handleChange('thisweek')">
          近7日
        </a-checkable-tag>
        <a-checkable-tag v-model="date.checked3" @change="handleChange('thismonth')">
          近30日
        </a-checkable-tag>
        <!-- <a-checkable-tag v-model="date.checked4" @change="handleChange('thisyear')">
          全年
        </a-checkable-tag> -->
      </a-col>
      <a-col
        :span="12">
        <a-range-picker
          :disabledDate="disabledDate"
          :placeholder="['开始时间','结束时间']"
          format="YYYY-MM-DD"
          v-model="rangePicker"
          @change="onChange"
          style="max-width:300px">
        <!--        <a-icon slot="suffixIcon" :component="IconExclamationCircle" />-->
        </a-range-picker>
      </a-col>
    </a-row></div>
</template>

<script>
import dayjs from 'dayjs'
import moment from 'moment'

export default {
   
   
  name: 'TimeFilter',
  data () {
   
   
    return {
   
   
      date: {
   
    checked1: false, checked2: true, checked3