el-date-picker日期时间选择器的选择时间限制到分钟级别
作者:前端程序员_花姐夫Jun
文章介绍了如何使用el-date-picker 组件来限制用户选择的时间,禁止选择当前时间的日期及时分,同时允许选择其他日期的全天时分,通过设置 `pickerOptions` 对象的属性,可以实现对日期和时间的精确控制,感兴趣的朋友跟随小编一起看看吧
有个需求是限制选择的时间,禁止选择当前时间的日期及时分,如果日期选择的不是今天,时间还是要能选择全天的时分
一、代码展示
<template> <el-date-picker v-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
函数,用于限制某些分钟不可选。
三、效果展示
到此这篇关于el-date-picker日期时间选择器的选择时间限制到分钟级别的文章就介绍到这了,更多相关el-date-picker选择时间到分内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!