element-plus日历组件支持时间范围、时间跨度

描述

• 基于vue3 + element-plus

• 对elment-plus的单日期组件 el-date-picker 进行的二次封装(element-plus)

• 支持自定义标题（title）、最大时间跨度（dayRange）、最小时间跨度（minSlot）、跨度类型（typeSlot。有两种类型：最小跨度区间外、最小跨度区间内）

解释

• 自定义参数说明：

const props = defineProps({
// 自定义标题
  title: {
    type: String,
    default: "报警时间",
  },
  //最大跨度区间，默认60天
  dayRange: {
    type: Number,
    default: 60,
  },
  //最小跨度区间，默认7天
  minSlot: {
    type: Number,
    default: 7,
  },
  //区间类型： 是超出最小跨度 还是在 最小跨度内。默认是 超出
  typeSlot: {
    type: String,
    default: "out-interval", // 有两种类型：out-interval、interval
  },
});

原理

业务情形

• 1，比如业务要求： 最小跨度区间为7天，最大时间范围为180天；选择时间段，只能选择：开始时间和结束时间必须超过7天，且不能超过最大时间范围。如图所示：

代码如下：

const dataTime = ref('');

//------- 时间跨度---开始--------------
const _minDate = ref(0);
const millisecondOfDay = 1 * 24 * 60 * 60 * 1000;
const dayRange = ref(180);

const disabledDateFn = (time) => {
  // let millisecondOfDay = 1 * 24 * 60 * 60 * 1000
  // return time.getTime() > Date.now() || time.getTime() < Date.now()-20*millisecondOfDay

  if (_minDate.value > 0) {
    return (
      //向前兼容
      (time.getTime() - _minDate.value > -7 * millisecondOfDay ||
        time.getTime() < Date.now() - dayRange.value * millisecondOfDay) &&
      // 向后兼容
      (time.getTime() - _minDate.value < 7 * millisecondOfDay || time.getTime() > Date.now())
    );
  } else {
    // 180天的 时间跨度
    return (
      time.getTime() > Date.now() || time.getTime() < Date.now() - dayRange.value * millisecondOfDay
    );
  }
};
const calendarChangeFn = (val) => {
  _minDate.value = val[0] && new Date(val[0]).getTime();
};
const blurFn = () => {
  _minDate.value = 0;
};

// --------------结束----------

• 2，比如业务要求： 最小跨度区间为7天，最大时间范围为180天；选择时间段，只能选择：开始时间和结束时间不能超过7天，且不能超过最大时间范围。如图所示：

代码如下：

const dataTime = ref('');

//------- 时间跨度---开始--------------
const _minDate = ref(0);
const millisecondOfDay = 1 * 24 * 60 * 60 * 1000;
const dayRange = ref(180);

const disabledDateFn = (time) => {
  // let millisecondOfDay = 1 * 24 * 60 * 60 * 1000
  // return time.getTime() > Date.now() || time.getTime() < Date.now()-20*millisecondOfDay

  if (_minDate.value > 0) {
    return (
      time.getTime() > Math.min(Date.now(), _minDate.value + 6 * millisecondOfDay) ||
      time.getTime() <
        Math.max(
          _minDate.value - 6 * millisecondOfDay,
          Date.now() - dayRange.value * millisecondOfDay
        )
    );
  } else {
    // 180天的 时间跨度
    return (
      time.getTime() > Date.now() || time.getTime() < Date.now() - dayRange.value * millisecondOfDay
    );
  }
};
const calendarChangeFn = (val) => {
  _minDate.value = val[0] && new Date(val[0]).getTime();
};
const blurFn = () => {
  _minDate.value = 0;
};
// --------------结束----------

本想把组件发到npm上，因为时间有限，就写这么多。希望，大家能学到。