element plus el-date-picker type=“datetime“ 限制年月日 时分秒选择

如何限制el-date-picker组件的时分秒选中!!!!!!!

文档

文档在这里:DateTimePicker 日期时间选择器 | Element Plus

 它提供的disabled-date给我们来限制日期选择

nice!!!!!!!!!!!!!!!!!

那小时,分钟,秒呢?咋限制🚫????闷逼!!文档没说呀!!

嗯??disabled-date?是不是小时就是disabled-hours,依此类推其他就是disabled-minutes

聪明!!不过猜对了又咋样?总不能一直靠猜吧!!

怎么想到的呢


上面的时间组件很明显和el-time-picker一样,我是这样猜到的,

看看源码去

element-plus/packages/components/date-picker/src/props/date-picker.ts at dev · element-plus/element-plus · GitHub

 

解决 

template:

<el-date-picker v-model="form.time" type="datetime":disabled-date="disableDate" :disabled-hours="disabledHour":disabled-minutes="disabledMinute" :disabled-seconds="disabledSecond"
/>

script:

/* 限制天 */
disableDate = (time) => {return time.getTime() < Date.now() - 8.64e7;
}/* 限制小时 */
export const disabledHour = () => {const arrs = []for (let i = 0; i < 24; i++) {if (new Date().getHours() <= i) continue;arrs.push(i)}return arrs;
}/* 限制分 */
export const disabledMinute = () => {const arrs = []for (let i = 0; i < 60; i++) {if (new Date().getMinutes() <= i) continue;arrs.push(i)}return arrs;
}/* 限制秒 */
export const disabledSecond = () => {const arrs = []for (let i = 0; i < 60; i++) {if (new Date().getSeconds() <= i) continue;arrs.push(i)}return arrs;
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年3月洗衣机大家电线上电商(京东天猫淘宝)销量排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;平台3月份的洗衣机大家电销售数据已出炉&#xff01; 根据鲸参谋数据显示&#xff0c;今年3月份&#xff0c;线上电商平台洗衣机的销量累计约224万件&#xff0c;环比增长了29%&#xff0c;环比增长了约29%&#xff…

网络变压器在网络分析仪上能通过测试,装上设备后网速达不到呢?

Hqst华轩盛(石门盈盛)电子导读&#xff1a;今天和大家一起探讨网络变压器在网络分析仪上能通过测试&#xff0c;装上设备后网通设备网速达不到的可能原因及其处理方式 一、出现这种情况可能有以下原因&#xff1a; 1.1. 设备兼容性问题&#xff1a;设备其它元器件与 网络…

MATLAB绘制复杂分段函数图像

MATLAB绘制复杂分段函数图像 clc;close all;clear all;warning off;%清除变量 rand(seed, 200); randn(seed, 200) % 定义 x 范围和分辨率 x linspace(-2, 2, 1000); % 初始化 y 数组 y zeros(size(x)); % 分段定义函数 y(x < 0) x(x < 0).^2; y(x > 0 …

使用Termux在Android设备上编译运行SpecCPU2006

Spec CPU 2006 的使用说明&#xff08;曲线救国版&#xff09; 因本部分实验用到的Spec CPU2006依赖于多个编译工具包&#xff0c;因此对源码的编译要在配置好环境的Linux设备上运行&#xff0c;根据实验发现&#xff0c;现有的环境&#xff08;包括adb和termux&#xff09;都不…

FreeRTOS之动态创建任务与删除任务

1.本文是利用FreeRTOS来动态创建任务和删除任务。主要是使用FreeRTOS的两个API函数&#xff1a;xTaskCreate()和vTaskDelete()。 任务1和任务2是让LED0、LED1闪烁。任务3是当按键按下时删除任务1。 使用动态创建任务时&#xff0c;需要动态的堆中申请任务所需的内存空间&…

Flask实战

from flask import Flask appFlask(__name__)点击Flask同时点击键盘ctrl即可查看Flask的默认初始化函数 def __init__(self,import_name: str,static_url_path: str | None None,static_folder: str | os.PathLike[str] | None "static",static_host: str | None …

安装docker的PHP环境NLMP环境在国产deepin操作系统上

1: 先安装docker 安装完后执行,权限设置 sudo usermod -aG docker $USER或者sudo usermod -aG docker kentrl#添加当前用户到Docker用户组中 sudo newgrp docker#更新用户组数据,必须执行否则无效 sudo systemctl restart docker 先看目录结构: 2:按照目录结构挂载磁盘,…

JavaScript(五)-正则表达式

文章目录 正则表达式正则表达式的介绍语法元字符修饰符 正则表达式 正则表达式的介绍 什么是正则表达式 正则表达式&#xff08;Regular expression&#xff09;是用于匹配字符串中字符组合的模式&#xff0c;在JavaScript中&#xff0c;正则表达式也是对象通常用来查找、替…

UE5数字孪生系列笔记(四)

场景的切换 创建一个按钮的用户界面UMG 创建一个Actor&#xff0c;然后将此按钮UMG添加到组件Actor中 调节几个全屏的背景 运行结果 目标点切换功能制作 设置角色到这个按钮的位置效果 按钮被点击就进行跳转 多个地点的切换与旋转 将之前的目标点切换逻辑替换成旋转的逻…

气象观测站点数据下载与处理

一、下载途径 全国400多个气象站气候数据&#xff08;1942-2022&#xff09; 王晓磊&#xff1a;中国空气质量/气象历史数据 | 北京市空气质量历史数据 气象数据免费下载网站整理 中国气象站观测的气象数据怎么下载 二、R语言处理 2.1 提取站点文件 library(dplyr) library(…

集成智能楼宇的微网系统多时间尺度MPC调度方法(附带Matlab代码)

含多智能楼宇的微网示意图如图所示&#xff0c;包括多个智能楼宇、微网可控分布式电源 、储能系统以及通信链路。其中&#xff0c;每个智能楼宇系统包括制冷设备、常规用电设备以及屋顶光伏系统。各单元功能介绍如下 针对含多智能楼宇的微网系统&#xff0c;提出一种基于模型预…

gpt能生成ppt吗

gpt能生成ppt吗 GPT是一个高度通用的工具&#xff0c;适用于多种场景和领域&#xff0c;制作ppt只是它强大功能的冰山一角&#xff0c;具体包括&#xff1a; 信息查询与解释&#xff1a; 提供科学、技术、历史、文化等领域的详细解释和背景信息。 解答疑问&#xff0c;帮助…

制作带有中文字体的 jdk 17 镜像

1. 准备中文字体 将所有需要添加的中文字体放进一个文件夹内&#xff0c;例如 fonts 2. 创建 Dockerfile 文件 Dockefile 文件与 fonts 文件夹放在同一目录下 # 使用 slim 版本的 jdk 17 镜像作为基础镜像 FROM openjdk:17-slim# 安装字体工具 RUN apt-get update &&a…

Xilinx 7系列FPGA 高性能(HP)接口与2.5V/3.3V 外设IO接口设计考虑

引言&#xff1a;Xilinx 7系列FPGA IO Bank分为HP Bank和HR Bank&#xff0c;HP IO接口电压范围为1.2V~1.8V&#xff0c;可以实现高性能&#xff0c;HR IO接口电压范围为1.2V~3.3V。当HR Bank与2.5V或者3.3V外设互联时&#xff0c;需要考虑接口电平的兼容性。根据性能需求、功能…

模拟相机拍照——对文档进行数据增强

一. 背景 假如我们有一个标准文件&#xff0c;我们对其进行文字识别、版面分析或者其他下游任务就比较容易。然而&#xff0c;当图片是手机拍照获取的&#xff0c;图片中往往有阴影、摩尔纹、弯曲。 那么&#xff0c;如何通过标准的文档&#xff0c;获得类似相机拍照的图片呢&…

家庭营销广告Criteo公司首次获得MRC零售媒体测量认证

家庭营销广告Criteo公司首次获得零售媒体测量MRC认证 商业媒体公司Criteo2024年3月28日宣布&#xff0c;它首次获得媒体评级委员会&#xff08;MRC&#xff09;的认证&#xff0c;在其企业零售媒体平台commerce Max和commerce Yield上&#xff0c;在桌面、移动网络和移动应用内…

4-Java方法详解

目录 Java方法详解 1、什么是方法 2、方法的定义及调用 3、方法重载 4、命令行传参 5、可变参数 6、递归 例题&#xff1a;代码实现一个计算机 Java方法详解 1、什么是方法 2、方法的定义及调用 形参&#xff1a;用来定义作用的 实参&#xff1a;实际调用传递给他的参数…

C#基于SSE传递消息给Vue前端实现即时单向通讯

一、简述 通常前端调用后端的API&#xff0c;调用到了&#xff0c;等待执行完&#xff0c;拿到返回的数据&#xff0c;进行渲染&#xff0c;流程就完事了。如果想要即时怎么办&#xff1f;如果你想问什么场景非要即时通讯&#xff0c;那可就很多了&#xff0c;比如在线聊天、实…

Java 笔记 01:Java 概述,MarkDown 常用语法整理

一、前言 记录时间 [2024-04-18] 昨天整理完 Docker 基础后略微思索了一下&#xff0c;还是决定把 Java 捡起来&#xff0c;系统地学习一遍&#xff0c;参考的学习课程是狂神说 Java 零基础&#xff0c;真诚感激此系列视频对笔者的帮助。 零基础可以学 Java 吗&#xff1f;只要…

JVS低代码平台表单引擎:字符串拼接与逻辑函数的完美结合

字符串拼接使用逻辑函数配置 示例场景&#xff1a;通过按钮触发逻辑使用函数将两个日期字段组合为范围时间类型。 选择开始日期和结束日期后&#xff0c;点击【合并】按钮自动处理回显至起止日期字段。在【合并】按钮上设置逻辑。 注意&#xff1a;这里【起止日期】组件是数组…