web 技术分享| 日期选择限制组件二次封装

2022-11-16
上海
本文字数：1232 字
阅读完需：约 4 分钟

vue3 + element plus 的项目

项目需求：

开始时间限制：存在某天之前的时间禁选结束时间限制：当天之后时间禁选开始时间与结束时间的跨度最大不超过一年使用 element plus 的 DatePicker 日期选择器

封装结构如下

<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"  />

复制代码

vue3 + ts 的 setup 中

startDisabledTime 禁用开始时间(毫秒)setTimeFn 设置时间，传参可参考 DatePicker 的 v-model 文档 emit("change") 事件传递给父组件获取时间区段

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 });