vue element plus DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间

TIP

日期时间选择器来自日期选择器和时间选择器的组合。 关于属性的更详细解释,请参阅日期选择器和时间选择器。

TIP

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

日期和时间点#

通过设置type属性为datetime,即可在同一个选择器里同时进行日期和时间的选择。 快捷方式的使用方法与 Date Picker 相同。

Default

With shortcuts

With default time

日期时间格式#

使用format指定输入框的格式。 使用value-format指定绑定值的格式。

默认情况下,组件接受并返回Date对象。

在 这里 查看 Day.js 支持的所有格式。

WARNING

请一定要注意传入参数的大小写是否正确

Emits Date object

Value:

Use value-format

Value:

Timestamp

Value:

下拉列表中的日期和时间格式#

使用 date-format 和 time-format 控制下拉列表面板输入框中显示的文本格式

-

日期和时间范围#

设置typedatetimerange即可选择日期和时间范围

Default

To

With shortcuts

To

默认的起始与结束时刻#

使用datetimerange进行范围选择时,在日期选择面板中选定起始与结束的日期,默认会使用该日期的00:00:00作为起始与结束的时刻;通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组,其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值,第二项控制结束日期的时间值。

Start and end date time 12:00:00

-

Start date time 12:00:00, end date time 08:00:00

-

Attributes#

属性名说明类型可选值默认值
model-value / v-model绑定值,如果它是数组,长度应该是 2Date / number / string / Array
readonly只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge/default/smalldefault
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
arrow-control是否使用箭头进行时间选择booleanfalse
type显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedate
format显示在输入框中的格式string参见 date formatsYYYY-MM-DD HH:mm:ss
popper-classDateTimePicker 下拉框的类名string
range-separator选择范围时的分隔符string'-'
default-value可选,选择器打开时默认显示的时间Date / [Date, Date]
default-time选择日期后的默认时间值。 如未指定则默认时间值为 00:00:00Date / [Date, Date]
value-format可选,绑定值的格式。 不指定则绑定值为 Date 对象string查看 日期格式
date-format 2.4.0可选,时间选择器下拉列表中显示的日期格式string参见 date formats
time-format 2.4.0可选,时间选择器下拉列表中显示的时间格式string参见 date formats
id等价于原生 input id 属性string / [string, string]
name等价于原生 input name 属性string
unlink-panels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefix-icon自定义前缀图标组件string | ComponentDate
clear-icon自定义清除图标string | ComponentCircleClose
shortcuts设置快捷选项,需要传入数组对象object[{ text: string, value: date / function }]
disabled-date一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function(Date)
cell-class-name设置自定义类名Function(Date)
teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue / falsetrue

事件#

事件名说明回调参数
change用户确认选定的值时触发value
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
calendar-change如果用户没有选择日期,那默认展示当前日的月份。 选中日历日期后会执行的回调,只有当 datetimerange 才生效[Date, Date]
visible-change当 DateTimePicker 的下拉列表出现/消失时触发出现时为true,隐藏时为false

方法#

方法名说明参数
focus使 input 获取焦点

Slots#

插槽名说明
default自定义单元格内容
range-separator自定义范围分割符内容

源代码#

文档

在 Crowdin 上编辑此页面 

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

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

相关文章

java017 - Java接口

1、接口概述 2、接口特点 代码&#xff1a; jumpping接口&#xff1a; 猫类&#xff1a; 测试类&#xff1a; 3、接口成员特点 代码&#xff1a; 实现 4、类和接口直接的关系 5、抽象类和接口的区别 不合理&#xff1a;不是所有门都具备报警功能&#xff0c;继承和实现都要写…

react native封装ScrollView,实现(滑到底部)和(滑到顶部+手指继续向下滑)时拉取新数据

里面的tw是在react native中使用tailwind的第三方库 只求读者把样式看个大概&#xff0c;主要还是功能的实现 ScrollView的官方文档如下 https://reactnative.cn/docs/scrollview import tw from twrnc import { View, Text, ScrollView, RefreshControl } from react-native …

双体系Java学习之算术运算符,赋值运算符,关系运算符

// 二元运算符//CtrlD : 复制当前行到下一行int a 10;int b 20;int c 25;int d 25;System.out.println(ab);System.out.println(a-b);System.out.println(a*b);System.out.println(a/(double)b);赋值运算符 关系运算符 package operator;public class Demo03 {public stati…

AI辅助研发的技术进展

AI辅助研发的技术进展 引言 随着人工智能&#xff08;AI&#xff09;技术的迅速发展&#xff0c;它正在逐渐渗透到各个领域。在软件研发领域&#xff0c;AI也被广泛应用于辅助研发工作。本文将介绍AI辅助研发的相关技术进展&#xff0c;包括代码自动生成、缺陷修复、测试优化…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础组件:AlphabetIndexer)

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 AlphabetIndexer(value: {arrayValue: Array<string>, s…

面试管:来,小卡拉米,来个最基本的,说一下Set和Map的理解

听到这个题之后的内心独白&#xff1a; 卧槽&#xff0c;我都是背的高达上&#xff0c;为啥来个基本的&#xff0c;没准备呀&#xff0c;这让我怎么吹牛逼&#xff0c;我特码的面的可是高级呀&#xff0c;不应该问我&#xff1a;项目调优、首屏优化、打包优化等问题吗&#xff…

【教程】 iOS构建版本无效问题解决方案

引言 在进行iOS应用上架时&#xff0c;有时会遇到构建版本无效的问题&#xff0c;即通过XCode上传成功后&#xff0c;但在App Store Connect的TestFlight中无法显示构建版本&#xff0c;或者显示一会儿后就消失了。本文将介绍可能的原因分析&#xff0c;并提供解决问题的方法。…

webpack基础配置及使用

webpack是什么 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图 &#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或多个 bundle 。主要有 五个核心概念&#xff1a…

电源技术中的TPHR8504PL,LQ(M1W 40V高速同步N沟道150A 功率MOSFET用于高效DC-DC转换器

TPHR8504PL,LQ&#xff08;M1W是一种MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;&#xff0c;它是40 Volt N-沟道MOSFET&#xff0c;由N型沟道和P型衬底构成&#xff0c;而P-沟道MOSFET则由P型沟道和N型衬底构成。 TPHR8504PL,LQ&#xff08;M1W N-沟道MOSFE…

2024 ssh连接linux ,包括连接被拒的解决方案

这里以windows系统 连接 linux&#xff08;centOS&#xff09;为例&#xff1a; 一、如果windows 连接时出现&#xff1a; Permission denied, please try again. 连接被拒绝&#xff0c;做出以下修改&#xff1a; 打开linux - Terminal 输入&#xff1a;cat /etc/ssh/sshd_c…

【算法 高级数据结构】树状数组:一种高效的数据结构(一)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;算法题、 基础算法~赶紧来学算法吧 &#x1f4a1;往期推荐&#xff1a; 【算法基础 & 数学】快速幂求逆元&#xff08;逆元、扩展欧几里得定理、小费马定理&#x…

Python与FPGA——图像锐化

文章目录 前言一、图像锐化二、Python robert锐化三、Python sobel锐化四、Python laplacian锐化五、FPGA sobel锐化总结 前言 在增强图像之前一般会先对图像进行平滑处理以减少或消除噪声&#xff0c;图像的能量主要集中在低频部分&#xff0c;而噪声和图像边缘信息的能量主要…

品牌要把控质量也要管控价格

在品牌发展的道路上&#xff0c;产品质量的把控非常重要&#xff0c;关系到品牌的竞争力&#xff0c;但品牌要长期发展&#xff0c;产品要获得市场足够份额&#xff0c;还需要有稳定的价格体系做支撑&#xff0c;这个价格不是仅凭品牌单方面的定价而定&#xff0c;而是整个渠道…

Oracle定时任务和存储过程

--1.声明定时任务 DECLAREjob NUMBER; BIGIN dbms_job.sumit(job, --任务ID,系统定义的test_prcedure(19)&#xff0c;--调用存储过程&#xff1f;to_date(20240305 02:00&#xff0c;yyyymmdd hh24:mi) --任务开始时间sysdate1/(24*60) --任务执行周期 [每分钟执行…

selenium模拟键盘输入-定位元素

键值解释 send_keys(Keys.BACK_SPACE)删除键BackSpace send_keys(Keys.SPACE)空格键Space send_keys(Keys.TAB)制表键Tab send_keys(Keys.ESPACE)回退键Esc send_keys(Keys.ENTER)回车键Enter send_keys(Keys.CONTROL,‘a’)全选CtrlA send_keys(Keys.CONTROL,‘c’)复制…

商业前端TS开发自动化工具

本期作者 一、背景 商业侧的业务比较复杂&#xff0c;B端项目中含有大量常量类的类型判断&#xff0c;且因历史原因&#xff0c;很多常量值前端无法直接知其含义&#xff0c;这既不利于新人的上手&#xff0c;也不利于项目的维护。 在开发协作上&#xff0c;前后端的API沟通&a…

Neo4j下载和安装以及相关语句

jdk安装: jdk的版本要和neo4j相匹配 • jkd8 对应 neo4j3.5.16 • jdk11对应 neo4j4.0-4.3 neo4j下载: 官网下载地址: https://neo4j.com/download-center/ 其他版本下载地址&#xff1a;https://we-yun.com/doc/neo4j/ neo4j环境配置 电脑属性—>高级系统属性—>环…

什么是工业边缘网关?工业边缘网关有什么作用?

在数字化和智能化的浪潮下&#xff0c;工业领域正迎来前所未有的变革。其中&#xff0c;工业边缘网关作为这场变革中的重要角色&#xff0c;正逐渐受到人们的关注。那么&#xff0c;什么是工业边缘网关&#xff1f;它如何在工业数字化中发挥作用&#xff1f;今天&#xff0c;就…

Wireshark——获取捕获流量的前N个数据包

1、问题 使用Wireshark捕获了大量的消息&#xff0c;但是只想要前面一部分。 2、方法 使用Wireshark捕获了近18w条消息&#xff0c;但只需要前5w条。 选择文件&#xff0c;导出特定分组。 输入需要保存的消息范围。如&#xff1a;1-50000。 保存即可。

数据库(mysql)-新手笔记(触发器,存储过程)

触发器 MySQL触发器&#xff08;Trigger&#xff09;是一种与表事件&#xff08;如INSERT、UPDATE或DELETE&#xff09;相关联的特殊类型的存储过程。 当指定表上的特定事件发生时&#xff0c;触发器会自动执行或激活。触发器可以在数据修改之前或之后执行&#xff0c;因此它…