当前位置: 首页 > news >正文

vue3 element-plus el-time-picker控制只显示时 分,并且控制可选的开始结束时间

 只显示时分

 控制只显示时分 HH:mm

 控制只显示时分秒 HH:mm:ss

全部代码:
<template><el-time-pickerstyle="width: 220px !important;"v-model="timeValue"format="HH:mm"value-format="HH:mm"/>
</template><script setup>
import {ref} from 'vue';const timeValue = ref('8:00');</script><style scoped>
.el-time-spinner__wrapper:last-child {display: none !important;
}
</style>
效果:
时分 HH:mm /时分秒 HH:mm:ss

控制可选开始结束日期

:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
 全部代码
<template><el-time-pickerstyle="width: 220px !important;"v-model="timeValue"format="HH:mm:"value-format="HH:mm":disabled-hours="disabledHours":disabled-minutes="disabledMinutes"/>
</template><script setup>
import {ref} from 'vue';const timeValue = ref('8:00');const disabledHours = () => {return Array.from({length: 24}, (_, h) => h).filter(h => h < 8 || h > 16);
};const disabledMinutes = (selectedHour) => {if (selectedHour === 16) return [];return [];
};
</script><style scoped>
.el-time-spinner__wrapper:last-child {display: none !important;
}
</style>
 效果:
8点之前16点之后的不可以选择:
const disabledHours = () => {return Array.from({length: 24}, (_, h) => h).filter(h => h < 8 || h > 16);
};

 8点之后16点之前的不可以选择:
const disabledHours = () => {return Array.from({length: 24}, (_, h) => h).filter(h => h > 8 && h < 16);
};

http://www.dtcms.com/a/139083.html

相关文章:

  • AOSP世界时间的更新
  • 基于多模态双路TCN-SE-YOLO的小目标检测
  • 三维领域的语义分割
  • 【深基18.例3】查找文献-图的储存与遍历
  • 无线uniapp调试设备
  • EthernetiP转modbusTCP网关在加氢催化中的应用
  • Flask(补充内容)配置SSL 证书 实现 HTTPS 服务
  • Flask(2): 在windows系统上部署项目2
  • 【C】初阶数据结构10 -- 希尔排序
  • 知识库Qanyting部署问题总结
  • 使用sealos部署kubernetes集群并实现集群管理
  • Idea连接远程云服务器上的MySQL,开放云服务器端口
  • Markdown 教程
  • Linux驱动开发-①regmap②IIO子系统
  • Spring Boot 项目中发布流式接口支持实时数据向客户端推送
  • 【KWDB创作者计划】_KwDB2.2.0深度实践:从存储引擎到物联网场景的多模数据库实战
  • XSS之同源、跨域、内容安全策略
  • C语言——数组
  • 【网络技术_域名解析DNS】一、DNS 基础剖析及其原理
  • [轻量化超分]CAMixerSR: Only Details Need More “Attention“
  • HTML5好看的水果蔬菜在线商城网站源码系列模板5
  • 有什么工具可以在家连接到公司内网?局域网址提供异地公网访问的那些常用方法
  • CentOS系统-超详细的Kubernetes集群搭建教程(kubernetes:1.28.2)
  • Rust生命周期、文件与IO
  • 20.3 使用技巧3
  • Qwen2.5-VL视觉大语言模型复现过程,没碰到什么坑
  • 【AI量化第24篇】KhQuant 策略框架深度解析:让策略开发回归本质——基于miniQMT的量化交易回测系统开发实记
  • Go语言入门到入土——三、处理并返回异常
  • Python爬虫之线程、进程、协程详解
  • Python 实现日志备份守护进程