ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）

发布时间：2024-01-05

ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）项目场景

推荐整理分享ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒），希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

ElementPlus DateTimePicker日期时间选择器当我们使用日期时间选择器时，可能会有需求只能选择今日之前或者今日之后，又或者一周内，一个月内的时间，而其他的时间应该禁止被用户选择。

解决

直接看文档：我没通过设置disabled-date属性来自定义禁用的时间。

今天之前/之后

ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）

只能选择今天之后的时间。

<template> <div> <el-date-picker v-model="time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDateFn"></el-date-picker> </div></template><script setup lang="ts">import { ref } from 'vue';const time = ref('')const disabledDateFn = (time: any) => { return time.getTime() < Date.now();}</script><style scoped></style>

同理，只可选择今天之前的时间直接取反即可。

一周之内

今天之前的，“大于”今天加7天的，禁用。(7 * 24 * 3600 * 1000为7天所对应的毫秒)

const disabledDateFn = (time: any) => { return time.getTime() < Date.now() || time.getTime() > Date.now() + 7 * 24 * 3600 * 1000;}

其他时间同理。

禁用时分秒

在上面的例子中，其实存在一个问题，如下图：如图，虽然11号不能选择，但是点击事件选择框，则可以选择一整天的时间。显然，这样用户体验十分不好，最理想的应该是用户可以选择11号，点开时间选择框只能选择当前之后的时分秒。

在网上找了很多方案，发现全是旧版elementUI的，好像elementPLUS把selectableRange已经去掉了，而文档中也没有明确指出限制时分秒的属性，最后的解决方案：

<template> <div> <el-date-picker v-model="time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDateFn" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" :default-time="new Date()"> </el-date-picker> </div></template><script setup lang="ts">import { ref } from "vue";const time = ref("");const disabledDateFn = (time: any) => { //比当前时间小的时间禁用（返回false则禁用） return time.getTime() < Date.now() - 24 * 3600 * 1000;};const disabledHours = () => { const a = []; for (let i = 0; i < 24; i++) { // 限制之前 < 之后 > ，下面同理 if (new Date().getHours() <= i) continue; a.push(i); } return a;};const disabledMinutes = () => { const a = []; for (let i = 0; i < 60; i++) { // 限制之前 < 之后 > ，下面同理 if (new Date().getMinutes() <= i) continue; a.push(i); } return a;};const disabledSeconds = () => { const a = []; for (let i = 0; i < 60; i++) { // 限制之前 < 之后 > ，下面同理 if (new Date().getSeconds() <= i) continue; a.push(i); } return a;};</script><style scoped></style>

这里之所以设置default-time为当前时间，是我发现当点击今天时，默认时间是00:00:00，按理说应该无法选中的…… 最后的效果：

本文链接地址:https://www.jiuchutong.com/zhishi/287285.html 转载请保留说明！

上一篇：Vue 批量上传，使用 el-upload 实现批量上传文件只调用一个请求，只需要一个上传按钮(vue批量上传图片至oss)

下一篇：VUE前端实现“模糊搜索“（纯前端）(vue前端页面设计)