vue3+elementPlus el-date-picker 自定义禁用状态hook 建立结束时间不能小于开始时间

背景：

elementPlus的el-date-picker中，相较于了element，升级了写法，
如果为每一个开始时间、结束时间设置禁用状态，在全局中会造成代码冗余。
所以在vue3中采用自定义hook的方式，实现代码复用。

1、实现如下效果：

开始时间：今天过后日期不可选，如p1所示；
结束时间：必须大于开始时间，精确到时分秒，如p2所示。

2、编写hook（useDisabledDate.ts）

export function useDisabledDate() {// 开始时间与结束时间，采用赋值的方式const forDisStartTime = ref()const forDisEndTime = ref()// 不可用的开始时间，如图1所示const disabledStartTime = (data: Date) => {return data.getTime() > new Date().getTime()}// 结束时间--日期const disabledEndTimeDate = (data: Date) => {if (forDisStartTime.value) {const hours = new Date(forDisStartTime.value).getHours(),seconds = new Date(forDisStartTime.value).getSeconds(),minutes = new Date(forDisStartTime.value).getMinutes()if (hours == 0 && minutes == 0 && seconds == 0) return data.getTime() < new Date(forDisStartTime.value).getTime() - 1000else return data.getTime() < new Date(forDisStartTime.value).getTime() - 8.64e7}}
// 结束时间--时const disabledEndTimeHours = () => {const hours = new Date(forDisStartTime.value as Date).getHours(),sY = new Date(forDisStartTime.value).getFullYear(),sM = new Date(forDisStartTime.value).getMonth(),sD = new Date(forDisStartTime.value).getDate(),eY = new Date(forDisEndTime.value).getFullYear(),eM = new Date(forDisEndTime.value).getMonth(),eD = new Date(forDisEndTime.value).getDate()const arrs = []if (sY == eY && sM == eM && sD == eD) {for (let i = 0; i < 24; i++) {if (hours <= i) continuearrs.push(i)}}return arrs}// 结束时间--分const disabledEndTimeMinutes = () => {const minutes = new Date(forDisStartTime.value as Date).getMinutes(),sY = new Date(forDisStartTime.value).getFullYear(),sM = new Date(forDisStartTime.value).getMonth(),sD = new Date(forDisStartTime.value).getDate(),eY = new Date(forDisEndTime.value).getFullYear(),eM = new Date(forDisEndTime.value).getMonth(),eD = new Date(forDisEndTime.value).getDate()const arrs = []if (sY == eY && sM == eM && sD == eD) {for (let i = 0; i < 60; i++) {if (minutes <= i) continuearrs.push(i)}}return arrs}// 结束时间--秒const disabledEndTimeSeconds = () => {const seconds = new Date(forDisStartTime.value).getSeconds(),sY = new Date(forDisStartTime.value).getFullYear(),sM = new Date(forDisStartTime.value).getMonth(),sD = new Date(forDisStartTime.value).getDate(),eY = new Date(forDisEndTime.value).getFullYear(),eM = new Date(forDisEndTime.value).getMonth(),eD = new Date(forDisEndTime.value).getDate()const arrs = []if (sY == eY && sM == eM && sD == eD) {for (let i = 0; i < 60; i++) {if (seconds <= i) continuearrs.push(i)}}return arrs}return {forDisStartTime,forDisEndTime,disabledStartTime,disabledEndTimeDate,disabledEndTimeHours,disabledEndTimeMinutes,disabledEndTimeSeconds}
}

3、在.vue文件中使用该hook

<script setup lang="ts">
// 引入
import { useDisabledDate } from '@/hooks/useDisabledDate'
const formItem = reactive({beginTime: '',endTime: ''
})
// #region disabled-date
const {forDisStartTime,forDisEndTime,disabledStartTime,disabledEndTimeDate,disabledEndTimeHours,disabledEndTimeMinutes,disabledEndTimeSeconds
} = useDisabledDate()
// 赋值开始时间
watch(() => formItem.beginTime,(newTime) => {forDisStartTime.value = newTime},{ immediate: true }
)
// 赋值结束时间
watch(() => formItem.endTime,(newTime) => {forDisEndTime.value = newTime},{ immediate: true }
)
// #endregion
</script>