vue3+antdesginVue+ts a-range-picker（日期时间组件）动态选择跨度不能大于1年

最新推荐文章于 2024-06-13 21:06:15 发布

造梦者FZ

最新推荐文章于 2024-06-13 21:06:15 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js typescript anti-design-vue

本文链接：https://blog.csdn.net/qq_43923146/article/details/130013788

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

vue3+antdesginVue+ts a-range-picker（日期时间组件）动态选择跨度不能大于1年

话不多说，先上效果
在这里插入图片描述

  <a-form layout="inline">
      <a-form-item label="时间" name="time">
        <a-range-picker :value="hackValue || time" :disabled-date="disabledDate" @change="onChange"
          @openChange="onOpenChange" @calendarChange="onCalendarChange" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchTable">查询</a-button>
      </a-form-item>
    </a-form>

<script lang="ts" setup>
import {  ref, onMounted, } from "vue";
import dayjs, { Dayjs } from "dayjs";

const time = ref<any>([dayjs(new Date()), dayjs(new Date())]);
const hackValue = ref<any>();

const disabledDate = (current: Dayjs) => {
  if (!dates.value || (dates.value as any).length === 0) {
    return false;
  }
  const tooLate = dates.value[0] && current.diff(dates.value[0], 'years') > 0;
  const tooEarly = dates.value[1] && dates.value[1].diff(current, 'years') > 0;
  return tooEarly || tooLate;
};

const onOpenChange = (open: boolean) => {
  if (open) {
    dates.value = [] as any;
    hackValue.value = [] as any;
  } else {
    hackValue.value = undefined;
  }
};

const onChange = (val: any) => {
  time.value = val;
};

const onCalendarChange = (val: any) => {
  dates.value = val;
};
</script >