vue3 + element plus 的專案

## 專案需求：

開始時間限制：存在某天之前的時間禁選
  結束時間限制：當天之後時間禁選
  開始時間與結束時間的跨度最大不超過一年
  使用 element plus 的 DatePicker 日期選擇器

## 封裝結構如下

```html
<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="結束時間" :disabled-date="disabledDate" class="date_picker_custom"></el-date-picker>
```

### vue3 + ts 的 setup 中

startDisabledTime 禁用開始時間(毫秒)
   setTimeFn 設定時間，傳參可參考 DatePicker 的 v-model 文件
   emit("change") 事件傳遞給父元件獲取時間區段

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

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/cd34963cf28045ce80615b85a3f75bc9.jpeg#pic_center)

web技術分享| 日期選擇限制元件二次封裝

相關文章