有个需求是限制选择的时间，禁止选择当前时间的日期及时分，如果日期选择的不是今天，时间还是要能选择全天的时分
一、代码展示
<template><el-date-pickerv-model="date"type="datetime"format="YYYY-MM-DD HH:mm"time-format="HH:mm"v-bind="pickerOptions"placeholder="选择日期时间"></el-date-picker>
</template><script lang="ts" setup>
import { ref, computed } from 'vue'const date = ref('')/*** 生成一个数组* @param start* @param end*/
const makeRange = (start: number, end: number) => {const result: number[] = []for (let i = start; i <= end; i++) {result.push(i)}return result
}/*** 限制今天之前的时间不能选择（小时）*/
const disabledHours = () => {let newVal = new Date(date.value)if (newVal && newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {//如果为今天，则限制当前时间前的时间不能选择。return makeRange(0, new Date().getHours() - 1)}
}/*** 限制今天之前的时间不能选择（分钟）* @param hour*/
const disabledMinutes = (hour: number) => {let newVal = new Date(date.value)if (newVal && newVal.getFullYear() == new Date().getYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {//如果为今天，则限制当前时间前的时间不能选择。return makeRange(0, new Date().getMinutes() - 1)}
}/*** 限制今天之前的时间不能选择的配置*/
const pickerOptions = computed(() => {return {// 限制今天之前的日期不能选择disabledDate(time: any) {return time.getTime() < Date.now() - 8.64e7},// 限制今天之前的小时不能选择disabledHours,// 限制今天之前的分钟不能选择disabledMinutes}
})
</script>
二、代码解释
模板部分 (<template>)
- 使用 el-date-picker 组件：
- v-model="date": 将用户选择的日期和时间绑定到 date 变量。
- type="datetime": 表明此日期选择器可以同时选择日期和时间。
- format="YYYY-MM-DD HH:mm": 定义日期和时间的显示格式。
- time-format="HH:mm": 单独定义时间部分的显示格式。
- v-bind="pickerOptions": 将 pickerOptions 对象的属性绑定到 el-date-picker 组件上，以实现对日期和时间选择的限制。
脚本部分 (<script>)
1. 导入和响应式数据声明
- import { ref, computed } from 'vue': 从 Vue 3 的 vue 包中导入 ref 和 computed 函数。
- const date = ref(''): 创建一个响应式的 date 变量，用于存储用户选择的日期和时间。初始值为空字符串。
2. makeRange 函数
const makeRange = (start: number, end: number) => {const result: number[] = [];for (let i = start; i <= end; i++) {result.push(i);}return result;
}
- 此函数接收两个数字参数
start和end。 - 创建一个空数组
result。 - 通过
for循环将从start到end的数字添加到result数组中。
3. disabledHours 函数
const disabledHours = () => {let newVal = new Date(date.value);if (newVal && newVal.getFullYear() == new Date().getFullYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {return makeRange(0, new Date().getHours() - 1);}
}
- 创建一个
newVal对象，通过date.value来初始化。 - 检查
newVal是否为今天的日期。 - 如果是今天，使用
makeRange函数生成一个数组，包含从 0 到当前小时减 1 的小时数，表示这些小时不可选。
4. disabledMinutes 函数
const disabledMinutes = (hour: number) => {let newVal = new Date(date.value);if (newVal && newVal.getFullYear() == new Date().getYear() &&newVal.getMonth() == new Date().getMonth() &&newVal.getDate() == new Date().getDate()) {return makeRange(0, new Date().getMinutes() - 1);}
}
- 与
disabledHours函数类似，但是它接收一个hour参数（此处似乎未使用）。 - 检查是否为今天，如果是，则使用
makeRange函数生成一个数组，包含从 0 到当前分钟减 1 的分钟数，表示这些分钟不可选。
5. pickerOptions 计算属性
const pickerOptions = computed(() => {return {// 限制今天之前的日期不能选择disabledDate(time: any) {return time.getTime() < Date.now() - 8.64e7;},// 限制今天之前的小时不能选择disabledHours,// 限制今天之前的分钟不能选择disabledMinutes};
});
computed(() => {...}): 这是一个计算属性，返回一个对象，包含对日期选择器的配置选项。disabledDate(time: any) {...}: 接收一个time对象，将其转换为时间戳，如果小于当前时间戳减去一天的毫秒数（8.64e7毫秒是一天），则该日期不可选。disabledHours: 引用disabledHours函数，用于限制某些小时不可选。disabledMinutes: 引用disabledMinutes函数，用于限制某些分钟不可选。
三、效果展示
