当前位置: 首页 > 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);
};

相关文章:

  • 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“
  • 被取消总统候选人资格,金文洙:将采取政治法律措施讨回公道
  • 上汽享道出行完成13亿元C轮融资,已启动港股IPO计划
  • 中日有关部门就日本水产品输华问进行第三次谈判,外交部回应
  • 图忆|红场阅兵:俄罗斯30年来的卫国战争胜利日阅兵式
  • 公安部部署“昆仑2025”专项工作,严打环食药等领域突出犯罪
  • 梅花奖在上海|第六代“杨子荣”是怎样炼成的?