vue element plus TimePicker 时间选择器

用于选择或输入日期

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

任意时间点#

可以选择任意时间

提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control属性则通过界面上的箭头进行选择。

限制时间选择范围#

您也可以限制时间选择范围。

通过 disabledHoursdisabledMinutes 和 disabledSeconds 限制可选时间范围。,

任意时间范围#

可选择任意的时间范围

添加is-range属性即可选择时间范围。 同样支持 arrow-control 属性。

To

To

API#

Attributes#

属性名说明类型默认
model-value / v-model绑定值,如果它是数组,长度应该是 2number / string / object''
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸enum
placeholder非范围选择时的占位内容string''
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
is-range是否为时间范围选择booleanfalse
arrow-control是否使用箭头进行时间选择booleanfalse
popper-classTimePicker 下拉框的类名string''
range-separator选择范围时的分隔符string'-'
format显示在输入框中的格式string see date formats
default-value可选,选择器打开时默认显示的时间Date / object
id等价于原生 input id 属性string / object
name等价于原生 input name 属性string''
label a11y等价于原生 input aria-label 属性string
prefix-icon自定义前缀图标string / ComponentClock
clear-icon自定义清除图标string / ComponentCircleClose
disabled-hours禁止选择部分小时选项Function
disabled-minutes禁止选择部分分钟选项Function
disabled-seconds禁止选择部分秒选项Function
teleported是否将 popover 的下拉列表镜像至 body 元素booleantrue
tabindex输入框的 tabindexstring / number0

事件#

事件名说明类型
change用户确认选定的值时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
visible-change当 TimePicker 的下拉列表出现/消失时触发Function

暴露#

名称说明Type
focus使 input 获取焦点Function
blur使 input 失去焦点Function
handleOpen 2.2.16打开时间选择器弹窗Function
handleClose 2.2.16关闭时间选择器弹窗Function

源代码#

组件 • 文档

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

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

相关文章

三、java线性表(顺序表、链表、栈、队列)

java线性表 三、线性表1.1 顺序表1.2 链表1.2.1 单向链表&#xff08;Singly Linked List&#xff09;1.2.2 双向链表&#xff08;Doubly Linked List&#xff09; 1.3 LinkedList VS ArrayList1.3.7 使用 LinkedList 的场景 1.4 栈1.5 队列 三、线性表 线性表是一种经典的数据…

LeetCode2696. Minimum String Length After Removing Substrings

文章目录 一、题目二、题解 一、题目 You are given a string s consisting only of uppercase English letters. You can apply some operations to this string where, in one operation, you can remove any occurrence of one of the substrings “AB” or “CD” from s…

手撕单链表(单向,不循环,不带头结点)的基本操作

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

mercury靶机

文章妙语 不与伪君子争名&#xff0c;不与真小人争利&#xff0c;不与执拗人争理&#xff0c;不与匹夫争勇&#xff0c;不与酸儒争才。不与蠢人施恩 一、信息收集 主机探测 端口探测 探测主机详细版本信息 8080开了http服务 目录扫描 robots.txt目录下什么也没有 二&#xff0…

Python | Iter/genartor | 一文了解迭代器、生成器的含义\区别\优缺点

前提 一种技术的出现&#xff0c;需要考虑&#xff1a; 为了实现什么样的需求&#xff1b;遇到了什么样的问题&#xff1b;采用了什么样的方案&#xff1b;最终接近或达到了预期的效果。 概念 提前理解几个概念&#xff1a; 迭代 我们经常听到产品迭代、技术迭代、功能迭代…

oracle常用内部表和视图

Oracle数据库中存在大量内部表和视图&#xff0c;主要用于系统管理和维护。这里列出一些常用的内部视图&#xff08;数据字典视图&#xff09;和内部表&#xff1a; **常用内部视图&#xff08;Data Dictionary Views&#xff09;&#xff1a;** 1. **用户权限相关视图&#…

零基础学习数学建模——(二)数学建模的步骤

本篇博客将详细介绍数学建模的步骤。 文章目录 引例&#xff1a;年夜饭的准备第一步&#xff1a;模型准备第二步&#xff1a;模型假设第三步&#xff1a;模型建立第四步&#xff1a;模型求解第五步&#xff1a;结果分析第六步&#xff1a;模型检验第七步&#xff1a;模型应用及…

爬虫案例—抓取小米商店应用

爬虫案例—抓取小米商店应用 代码如下&#xff1a; # 抓取第一页的内容 import requests from lxml import etree url ‘https://app.mi.com/catTopList/0?page1’ headers { ‘User-Agent’: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (K…

go中for range的坑以及解决方案

一、for range的坑 相信小伙伴都遇到过以下的循环变量的问题&#xff0c;那是因为循环的val变量是重复使用的&#xff0c;即仅有一份。也就是说&#xff0c;每次循环后赋给val的值就会把前面循环赋给val的值替换掉&#xff0c;所以打印出来的值都是最后一次循环赋给val的值。 …

openeuler的安装和两台linux主机配置ssh实现互相免密登陆

一、openeuler的安装 下载OpenEuler - 网址&#xff1a;https://www.openeuler.org/zh/download/archive/ - 版本选择&#xff1a;openEuler 22.03 LTS SP2 &#xff08;镜像文件&#xff09; &#xff0c;即长期更新版 设置自定义硬件 内存&#xff1a;推荐2GB 处理器&…

oracle基本用户管理和权限分配

1.用户与模式的关系&#xff0c;一一对应的关系 2.创建与管理用户 2.1创建用户语法 CREATE user wdf IDENTIFIED by tiger--创建用户wdf,密码tiger DEFAULT tablespace users--用户的默认表空间 quota 10M on users;--在表空间的占用最大空间 注意&#xff1a;用户创建以后…

rke2 Offline Deploy Rancher v2.8.0 latest (helm 离线部署 rancher v2.8.0)

文章目录 预备条件为什么是三个节点&#xff1f;​预备条件配置私有仓库介质清单安装 helm安装 cert-manager下载介质镜像入库helm 部署卸载 安装 rancher镜像入库helm 安装 验证 预备条件 所有支持的操作系统都使用 64-bit x86 架构。Rancher 兼容当前所有的主流 Linux 发行版…

如何通过兴趣爱好选职业?

一个错误的选择&#xff0c;可能造成终身的遗憾&#xff0c;一个正确的选择&#xff0c;可以让我们少奋斗几十年。所以无论现在付出多少代价&#xff0c;多花一些时间&#xff0c;去研究以下未来的职业方向&#xff0c;这是值得的。 职业定位&#xff08;专业定位&#xff09;…

深兰科技AI医疗健康产品获3000台采购订单

12月6日&#xff0c;武汉某企业与深兰科技签署协议&#xff0c;一次性采购3000台深兰科技AI生理健康检测仪——扁鹊。 深兰科技AI生理健康检测仪——扁鹊是深兰科技推出的人体生理指标检测产品。基于AI生物技术、融合互联网医疗及AIoT技术&#xff0c;深兰科技AI生理健康检测仪…

YOLOv8-Seg改进:轻量化改进 | 华为Ghostnet,超越谷歌MobileNet | CVPR2020

🚀🚀🚀本文改进: Ghost bottleneck为堆叠Ghost模块 ,与YOLOV8建立轻量C2f_GhostBottleneck 🚀🚀🚀YOLOv8-seg创新专栏:http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1)手把手教你如何训练YOLOv8-seg; 2)模型创新,提…

HubSpot CRM:卓越客户服务的关键引擎

在数字化时代&#xff0c;提供卓越的客户服务是企业成功的关键之一。HubSpot CRM以其强大的功能和灵活性&#xff0c;成为实现卓越客户服务的关键引擎&#xff0c;以下是强调HubSpot CRM在客户服务中的应用的关键方面&#xff1a; 1. 全面的客户视图 HubSpot CRM集成了全面的…

【llm 部署运行videochat--完整教程】

申请llama权重 https://ai.meta.com/resources/models-and-libraries/llama-downloads/-> 勾选三个模型 -> 等待接收邮件信息&#xff08;很快&#xff09;下载llama代码库 git clone https://github.com/facebookresearch/llama.git cd llama bash download.py-> 输…

《路由与交换技术》---练习题(无答案纯享版)

注意&#xff01;&#xff01;&#xff01;这篇blog是无答案纯享版的 选择填空的答案我会放评论区 简答题可以看这里 计算题可以发私信问我&#xff08;当然WeChat也成&#xff09;but回讯息很慢 一、选择题 1.以下不会在路由表里出现的是: ( ) A.下一跳地址 B.网络地址 C…

科大讯飞星火大模型加持数字员工系列产品发布

面对时代浪潮&#xff0c;基业长青的企业总会率先拥抱变化&#xff0c;在时代交替中创造新的增长空间。当数字化浪潮涌入千行百业&#xff0c;企业掌舵者如何选择转型&#xff1f; 从数字员工到灯塔工厂&#xff0c;愈发成熟的人工智能技术已深入企业管理&#xff0c;持续提高…

小白苦恼:电脑那么多USB口,怎么知道哪个读写更快?

前言 最近有个朋友和小白抱怨&#xff1a;电脑那么多USB接口&#xff0c;有些接口在传输文件的时候实在慢的很。 电脑诞生以来&#xff0c;USB接口就一直存在。但是USB接口还是长得几乎一样&#xff0c;不仔细去研究都不知道哪个USB会更快。 许多小伙伴就会直接放弃辨认&…