element-plus DateTimePicker日期选择器,限制指定日期和时间不可选择

本文主要是介绍element-plus DateTimePicker日期选择器,限制指定日期和时间不可选择,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

element-plus日期选择器,在指定日期时间前不可选择。
限制日期选择,使用disabled-date
限制小时选择,使用disabled-hours
限制分钟选择,使用disabled-minutes
限制毫秒选择,使用disabled-seconds

指定日期当天的时间有限制:
在这里插入图片描述
其他日期的时间无限制:
在这里插入图片描述

全部代码:

      <el-date-pickerv-model="state.value"type="datetime":default-time="new Date()":disabled-date="disabledDateFn":disabled-hours="disabledHours":disabled-minutes="disabledMinutes":disabled-seconds="disabledSeconds"value-format="YYYY-MM-DD HH:mm:ss":placeholder="请选择" />
const state = reactibe({value:'',lastDate:'2023-10-27 12:20:30'
})// 限制日期
const disabledDateFn = (date) => {if (date.getTime() < new Date(state.lastDate).getTime() - 8.64e7) {return true;}return false;
};// 限制小时
const disabledHours = () => {const a = [];//选中的年月日const value = dayjs(state.value).format('YYYY-MM-DD');//指定日期的年月日const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');// 选中日期不等于指定日期,不限制if (value !==lastDate) {return;}for (let i = 0; i < 24; i++) {if (new Date(state.lastDate).getHours() > i) {a.push(i);}}return a;
};// 限制分钟
const disabledMinutes = () => {const a = [];const value = dayjs(state.value).format('YYYY-MM-DD');const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');if (value !==lastDate) { {return;}for (let i = 0; i < 60; i++) {if (new Date(state.lastDate).getMinutes() > i) {a.push(i);}}return a;
};// 限制毫秒
const disabledSeconds = () => {const a = [];const value = dayjs(state.value).format('YYYY-MM-DD');const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');if (value !==lastDate){return;}for (let i = 0; i < 60; i++) {if (new Date(state.lastDate).getSeconds() > i) {a.push(i);}}return a;
};

注意:选择面板上的日期后,v-model绑定的值就会更新,而不是点击确认按钮后!!!

这篇关于element-plus DateTimePicker日期选择器,限制指定日期和时间不可选择的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/309473

相关文章

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

Mybatis Plus Join使用方法示例详解

《MybatisPlusJoin使用方法示例详解》:本文主要介绍MybatisPlusJoin使用方法示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录1、pom文件2、yaml配置文件3、分页插件4、示例代码:5、测试代码6、和PageHelper结合6

Java日期类详解(最新推荐)

《Java日期类详解(最新推荐)》早期版本主要使用java.util.Date、java.util.Calendar等类,Java8及以后引入了新的日期和时间API(JSR310),包含在ja... 目录旧的日期时间API新的日期时间 API(Java 8+)获取时间戳时间计算与其他日期时间类型的转换Dur

python如何生成指定文件大小

《python如何生成指定文件大小》:本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成

Mybatis Plus JSqlParser解析sql语句及JSqlParser安装步骤

《MybatisPlusJSqlParser解析sql语句及JSqlParser安装步骤》JSqlParser是一个用于解析SQL语句的Java库,它可以将SQL语句解析为一个Java对象树,允许... 目录【一】jsqlParser 是什么【二】JSqlParser 的安装步骤【三】使用场景【1】sql语

利用Python实现时间序列动量策略

《利用Python实现时间序列动量策略》时间序列动量策略作为量化交易领域中最为持久且被深入研究的策略类型之一,其核心理念相对简明:对于显示上升趋势的资产建立多头头寸,对于呈现下降趋势的资产建立空头头寸... 目录引言传统策略面临的风险管理挑战波动率调整机制:实现风险标准化策略实施的技术细节波动率调整的战略价

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1