web technology sharing | Date selection limits secondary packaging of components

vue3 + element plus project

Project requirements:

Start time limit: time before a certain day is banned End
time limit: time after that day is banned
The span between start time and end time does not exceed one year
Use the DatePicker date picker of element plus

The package structure is as follows

<el-date-picker
    v-model="datePicker.time"
    type="daterange"
    value-format="X"
    :default-time="datePicker.defaultime"
    format="YYYY-MM-DD"
    size="large"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    @change="timeChange"
    :disabled-date="disabledDate"
    @calendar-change="calendarChange"
    class="date_picker_custom"
  />

In the setup of vue3 + ts

startDisabledTime disable start time (milliseconds)
setTimeFn set time, refer to the v-model document of DatePicker for parameter
passing emit("change") event is passed to the parent component to get the time range

const prop = defineProps({
    
    
  // 禁用开始时间(毫秒)
  startDisabledTime: {
    
    
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["change"]);
const datePicker = reactive({
    
    
  time: "" as Date | number | string,
  // 记录开始时间(选择区间所需)
  startData: null as number | null,
  defaultime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
});
// 选中日历日期后会执行的回调!!只选择一个日期就会执行,官网写的不清楚
// 主要用这个方法获取到用户选择的初始时间,然后在禁用方法里通过这个时间设置结束时间的禁用时间
const calendarChange = (dates: any) => {
    
    
  let hasSelectDate = dates !== null && dates.length > 0;
  datePicker.startData = hasSelectDate
    ? Math.floor(dates[0].getTime() / 1000)
    : null;
};
const disabledDate = (time: any) => {
    
    
  const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
  const tempTime = Date.now();
  if (datePicker.startData) {
    
    
    const sta = datePicker.startData * 1000 - timeRange * 365;
    const minTime = sta < prop.startDisabledTime ? prop.startDisabledTime : sta;
    const maxTime = datePicker.startData * 1000 + timeRange * 365;
    if (tempTime < maxTime) {
    
    
      return time.getTime() < minTime || time.getTime() > tempTime;
    }
    return time.getTime() < minTime || time.getTime() > maxTime;
  } else {
    
    
    return (
      time.getTime() >= tempTime || time.getTime() < prop.startDisabledTime
    );
  }
};
const timeChange = (dates: any) => {
    
    
  let hasSelectDate = dates !== null && dates.length > 0;
  datePicker.startData = hasSelectDate ? Number(dates[0]) : null;
  emit("change", dates);
};

// 设置日期
const setTimeFn = (time: Date | number | string) => {
    
    
  datePicker.time = time;
};
// 暴漏方法给父组件
defineExpose({
    
     setTimeFn });