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

ops/2025/2/21 4:40:18/

如何限制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.ppmy.cn/ops/8948.html

相关文章

Android studio添加aidl文件时,添加按钮为黑色不可点击添加解决办法

在android studio添加aidl文件时出现下面这个情况只需要在模块的build.gradle.kts文件中的android中添加以下代码即可添加aidl android {// 设置 AIDL 支持buildFeatures {aidl true} }

【UE5.1】使用MySQL and MariaDB Integration插件——(3)表格形式显示数据

在上一篇&#xff08;【UE5.1】使用MySQL and MariaDB Integration插件——&#xff08;2&#xff09;查询&#xff09;基础上继续实现以表格形式显示查询到的数据的功能 效果 步骤 1. 在“WBP_Query”中将多行文本框替换未网格面板控件&#xff0c;该控件可以用表格形式布局…

Linux —— 进程控制

一、进程创建 —— fork 1.fork fork&#xff1a;在调用时&#xff0c;创建子进程&#xff0c;父进程返回子进程pid&#xff0c;子进程返回0&#xff0c;出错返回-1 头文件&#xff1a;#include<unistd.h> 2.fork函数被调用时&#xff0c;CPU做了什么&#xff1f; a…

3.AlexNet--CNN经典网络模型详解(pytorch实现)

看博客AlexNet--CNN经典网络模型详解&#xff08;pytorch实现&#xff09;_alex的cnn-CSDN博客&#xff0c;该博客的作者写的很详细&#xff0c;是一个简单的目标分类的代码&#xff0c;可以通过该代码深入了解目标检测的简单框架。在这里不作详细的赘述&#xff0c;如果想更深…

通过实例学C#之StreamWriter类

简介 该类可以实现以一种特定的编码向流中写入字符的功能。 在程序所在文件夹的Debug文件下创建一个test.txt的空白文件。 构造函数 StreamWriter (Stream stream) 使用流对象stream创建一个写入流streamWriter。 static void Main(string[] args) {FileStream fs new FileS…

Cmake编译 Qt5 Demo

环境&#xff1a; Linux szdpu13 3.10.0-693.el7.x86_64&#xff0c; Qt 5.9.2 文件&#xff1a; //main.cc mainwindow.cc/.h CMakeLists.txt CMakeLists&#xff1a; cmake_minimum_required(VERSION 3.1)project(qt5Test)# Find Qt5 find_package(Qt5 COMPONENTS Core …

解决vue定时器清除无效问题

清除无效原因&#xff1a; 当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后&#xff0c;才触发的。【此定时器前面有一堆请求&#xff0c;等这堆请求完成之后&#xff0c;定时器才会被触发】 路由切换过快的时候&#xff0c;切换到了其他页面&#xff08;page2…

MySQL的创建用户以及用户权限

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法&#xff0c;看完代码自己敲一遍&#xff0c;十分有用 拖动表名到查询文件中就可以直接把名字拉进来中括号&#xff0c;就代表可写可不写 目录 1.创建用户 1.1 工具创建用户 1.2 脚本创建用户 1.2.…