antd限制时间日期选择框选择范围为:今天前,选中的日期当月, 前后日期为7天内

81 阅读1分钟
  <a-range-picker
    :allowClear="false"
    v-model:value="formState.date"
    :disabledDate="disabledDate"
    @openChange="onOpenChange"
    @calendarChange="onCalendarChange"
    :show-time="{ format: 'HH:mm:ss' }"
    format="YYYY-MM-DD HH:mm:ss"
    valueFormat="YYYY-MM-DD HH:mm:ss"
    :placeholder="['起始时间', '结束时间']"
    style="width: 100%" />
const disabledDate = (current) => {
    const currentDayjs = dayjs(current);
    const now = dayjs();
    // 今天前
    const isTodayOrEarlier = currentDayjs.isSame(now, 'day') || currentDayjs.isBefore(now, 'day');

    if (formState.date && formState.date.length === 2) {
      const startDate = dayjs(formState.date[0]);
      const endDate = dayjs(formState.date[1]);
      // 选中开始时间
      if (formState.date[0]) {
        // 限制当月
        const isInSameMonth = currentDayjs.month() === startDate.month();
        // 限制7天内
        const diffFromStart = currentDayjs.diff(startDate, 'day');
        const isNotTooLate = !startDate.isValid() || diffFromStart <= 6;
        return !isInSameMonth || !isTodayOrEarlier || !isNotTooLate;
      } 
      // 选中结束时间
      else if (formState.date[1]) {
        const isInSameMonth = currentDayjs.month() === endDate.month();
        const diffFromEnd = currentDayjs.diff(endDate, 'day');
        const isNotTooLate = !endDate.isValid() || (diffFromEnd >= -5 && diffFromEnd <= 0);
        return !isInSameMonth || !isTodayOrEarlier || !isNotTooLate;
      }
    }
    // 未选中时间
    else {
      return !isTodayOrEarlier;
    }
  };
  const onOpenChange = (open) => {
    // 每次点击日期组件清空时间;
    if (open) {
      formState.date = [];
    }
  };

  const onCalendarChange = (val) => {
    formState.date = val;
  };