vue element plus DatePicker 日期选择器

用于选择或输入日期

TIP

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

选择某一天#

以”日“为基本单位,基础的日期选择控件

基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项, 通过 disabledDate 函数,来设置禁用掉的日期。

largedefaultsmall

Default

Picker with quick options

其他日期单位#

通过扩展基础的日期选择,可以选择周、月、年或多个日期

Week

Month

Year

Dates

选择一段时间#

你可以通过如下例子来学习如何设置一个日期范围选择器。

在选择日期范围时,默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份,可以使用 unlink-panels 属性解除联动。

largedefaultsmall

Default

To

With quick options

To

选择月份范围#

你当然还可以选择一个月的范围。

在选择月份范围时,默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份,可以使用 unlink-panels 属性解除联动。

Default

To

With quick options

To

默认值#

日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value 来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date() 对象。

如果类型是 daterangedefault-value 则会设置左边窗口的默认值。

date

daterange

-

日期格式#

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

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

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

WARNING

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

Emits Date object

Value:

Use value-format

Value:

Timestamp

Value:

默认显示日期#

在选择日期范围时,你可以指定起始日期和结束日期的默认时间。

默认情况下,开始日期和结束日期的时间部分都是选择日期当日的 00:00:00。 通过 default-time 可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。

Component value:

-

设置自定义前缀的内容#

前缀内容可以被自定义。

当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon 属性来定制前缀内容

set prefix-icon

pre

自定义内容#

弹出框的内容是可以自定义的,在插槽内你可以获取到当前单元格的数据

更详细的数据类型,请查看下表

interface DateCell {column: numbercustomClass: stringdisabled: booleanend: booleaninRange: booleanrow: numberselected: DayjsisCurrent: booleanisSelected: booleanstart: booleantext: numbertimestamp: numberdate: Datedayjs: Dayjstype: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

国际化#

由于 Element Plus 的默认语言为英语,如果你需要设置其它的语言,请参考国际化文档。

要注意的是:日期相关的文字(月份,每一周的第一天等等)也都是通过国际化来配置的。

API#

属性#

属性名说明类型默认
model-value / v-model绑定值,如果它是数组,长度应该是 2number / string / object''
readonly只读booleanfalse
disabled禁用booleanfalse
size输入框尺寸enum
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
placeholder非范围选择时的占位内容string''
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
type显示类型enumdate
format显示在输入框中的格式参见 date formatsYYYY-MM-DD
popper-classDatePicker 下拉框的类名string
popper-options自定义 popper 选项,更多请参考 popper.jsobject{}
range-separator选择范围时的分隔符string'-'
default-value可选,选择器打开时默认显示的时间object
default-time范围选择时选中日期所使用的当日内具体时刻object
value-format可选,绑定值的格式。 不指定则绑定值为 Date 对象参见 date formats
id等价于原生 input id 属性string / object
name等价于原生 input name 属性string / object''
unlink-panels在范围选择器里取消两个日期面板之间的联动booleanfalse
prefix-icon自定义前缀图标 如果 type的值是TimeLikeType,那么就是 Clock,不然就是 Calendarstring / object''
clear-icon自定义清除图标string / objectCircleClose
validate-event是否触发表单验证booleantrue
disabled-date一个用来判断该日期是否被禁用的函数,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。Function
shortcuts设置快捷选项,需要传入数组对象object[]
cell-class-name设置自定义类名Function
teleported是否将 date-picker 的下拉列表插入至 body 元素booleantrue

事件#

事件名说明类型
change用户确认选定的值时触发Function
blur在组件 Input 失去焦点时触发Function
focus在组件 Input 获得焦点时触发Function
calendar-change在日历所选日期更改时触发Function
panel-change当日期面板改变时触发。Function
visible-change当 DatePicker 的下拉列表出现/消失时触发Function

插槽#

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

暴露#

插槽名说明类型
focus使选择器的输入框获取焦点Function
handleOpen 2.2.16打开日期选择器弹窗Function
handleClose 2.2.16关闭日期选择器弹窗Function

类型声明#

显示类型声明

 

源代码#

组件 • 文档

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

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

相关文章

软件测试|Python urllib3库使用指南

简介 当涉及到进行网络请求和处理HTTP相关任务时&#xff0c;Python的urllib3库是一个强大且灵活的选择。它提供了一种简单的方式来执行HTTP请求、处理响应和处理连接池&#xff0c;使得与Web服务进行交互变得更加容易。本文将详细介绍如何使用urllib3库进行网络请求。 安装u…

java.net.ConnectException: Connection refused: connect已解决

&#x1f95a;今日鸡汤&#x1f95a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 —— 《枫》 遇见问题莫着急&#xff0c;着急也没用~&#x1f636;‍&#x1f32b;️ 目录 &#x1f9c2;1.令人发麻的问题 &am…

python深度学习搭环境技巧

1、使用-t做不同项目的环境隔离 pip intall xxx -t /path/env1 公共环境放一个路径&#xff0c;其他放单独路径&#xff0c;可以完美隔离 训练时通过export PYTHONPATH/path/env1:$PYTHONPATH来调整 2、安装包&#xff0c;因为依赖导致失败 加上参数–no-deps, 不按照依赖 有…

vagrant 用户名密码登录

正常登录后 sudo -i 切换到root权限 vim /etc/ssh/vim sshd_config 将PasswordAuthentication no设置 为yes 重启sshd.service服务 systemctl restart sshd.service

软件测试|详解 Pytest 参数化:简化测试用例的编写

简介 Pytest 是一个广泛使用的 Python 测试框架&#xff0c;它提供了丰富的功能来编写和执行测试用例。其中一个强大的特性是参数化&#xff0c;它允许我们通过一种简洁的方式运行多个输入参数的相似测试用例&#xff0c;从而减少冗余的代码。本文将详细介绍 Pytest 的参数化功…

MT36291 2.5A 高效的1.2MHz电流模式升压转换器 DCDC管理芯片 航天民芯

描述 MT36291是一个恒定频率、6引脚SOT23电流模式升压转换器&#xff0c;旨在用于小型、低功耗的应用。MT36291的开关频率为1.2MHz&#xff0c;并允许使用2mm或更低高度的微小、低成本的电容器和电感器。内部软启动导致注入电流小&#xff0c;延长电池寿命。MT36291的特点是在光…

二线厂商-线上测评-大数据开发

曾经投递过一些中级岗位&#xff0c;在面试之前&#xff0c;会通过邮件的方式把性格测试的题目发给你让你做一下。 一般分为单选题&#xff0c;多选题&#xff0c;性格测试题&#xff0c;认知理解题等等。 大概做了一个小时吧。 单选题&#xff1a; 感觉就是类似于以前高中时候…

golang实现加密解密文档

golang实现加密解密文档 package mainimport ("bytes""crypto/aes""crypto/cipher""crypto/rand""encoding/base64""flag""fmt""io""io/ioutil" )func main() {encodePtr : flag.…

中小企业实施了MES系统后,同样具备大企业的生产能力

工业4.0、智能制造是当前制造业最热门的话题。数字化工厂是实现智能制造的基础&#xff0c;在建设数字化工厂的过程中&#xff0c;MES系统是核心也是最重要的一环。万界星空MES系统是企业信息数据集成的纽带&#xff0c;可帮助企业实现监控与实际生产过程的同步化&#xff0c;全…

2024--Django平台开发-Django知识点(三)

day03 django知识点 项目相关路由相关 urls.py视图相关 views.py模版相关 templates资源相关 static/media 1.项目相关 新项目 开发时&#xff0c;可能遇到使用其他的版本。虚拟环境 老项目 打开项目虚拟环境 1.1 关于新项目 1.系统解释器命令行【学习】 C:/python38- p…

BUUCTF ---> Encrypto

转眼就一月十号了&#xff0c;本来今天不想更的&#xff0c;&#xff08;因为我懒&#xff09;是因为明天要考python&#xff0c;好像还不止 但是呢&#xff0c;发现BUUCTF的密码学模块刚好可以用到py的脚本&#xff0c;那就当时复习一下吧&#xff01;&#xff01; 这里就要介…

【Oracle】查看表空间使用率sql

10G进asm 直接su - oracle 然后asmcmd 11G进asm,需要su - grid 然后asmcmd 1.切换到相关oracle数据库实例下: echo $ORACLE_SID 查看当前数据库实例 或者进入sql下执行 select instance_name from V$instance; export ORACLE_SID=sohdb1 切换到sohdb1数据库实例下…

您的计算机已被.LIVE勒索病毒感染?恢复您的数据的方法在这里!

引言&#xff1a; 在数字时代&#xff0c;.LIVE勒索病毒如暗夜中的黑暗调&#xff0c;威胁着个人和企业的数字安全。本文将深入介绍.LIVE勒索病毒的特征&#xff0c;提供解密数据的方法&#xff0c;并讨论预防措施&#xff0c;让我们共同筑起数字世界的防护之墙。数据的重要性…

系列三十六、注解版Spring、SpringMVC配置文件

一、注解版Spring、SpringMVC配置文件 1.1、pom <dependencies><!-- SpringMVC --><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.1.5.RELEASE</version><…

C++学习笔记——返回对象

一、返回对象 当我们说一个函数返回对象时&#xff0c;意味着该函数的返回值是一个对象。这种情况下&#xff0c;函数可以通过创建对象的副本、返回对象的引用或者返回对象的指针来实现。 返回对象的副本&#xff1a; 当一个函数返回对象的副本时&#xff0c;函数内部会创建一…

Mac上修复Gitee报错 Oauth: Access token is expired

一. 背景&#xff1a; 最近在gitee上拉了两次项目&#xff0c;两次使用的邮箱密码不一致&#xff08;换绑邮箱&#xff09;&#xff0c;第一次在idea中拉取后端项目&#xff0c;第二次在webstorm中拉取前端项目&#xff0c;出现该异常&#xff0c;记录下解决方案 二. 错误回显…

简易机器学习笔记(九)LeNet实例 - 在眼疾识别数据集iChallenge-PM上的应用

前言 上一节大概讲了一下LeNet的内容&#xff0c;这一章就直接来用&#xff0c;实际上用一下LeNet来进行训练和分类试试。 调用的数据集&#xff1a; https://aistudio.baidu.com/datasetdetail/19065 说明&#xff1a; 如今近视已经成为困扰人们健康的一项全球性负担&…

整形数据在内存中的存储(C语言)

整形数据在内存中的存储 1.整形家族2.(原码、反码、补码)基础知识3.大小端3.1 什么是大小端3.2 为什么有大端和小端3.3 一道关于大小端字节序的面试题3.4 关于整形数据存储的题目(7题)3.4.13.4.23.4.33.4.43.4.53.4.63.4.7 4.总结 1.整形家族 signed可省可不省&#xff0c;一般…

Spring创建的单例对象,存在线程安全问题吗?

这个问题涉及到Spring框架中的Bean的作用域、单例模式的线程安全性以及如何判断和处理线程安全问题。让我们一步步深入探讨这些概念。 Spring Bean的作用域 Spring提供了几种不同的Bean作用域&#xff0c;包括&#xff1a; 1、 Singleton&#xff08;单例&#xff09;&#x…

​​​​​​​Lontium #LT8911EXB适用于MIPIDSI/CSI转EDP应用方案,分辨率高达2560x1440@60HZ 。

1.描述 LT8911EXB是一款高性能 MIPIDSI/CSI到eDP转换器&#xff0c;单端口MIPI接收器有1个时钟通道和4个数据通道&#xff0c;每个数据通道最大运行2.0Gbps&#xff0c;最大输入带宽为8.0Gbps。转换器解码输入MIPI RGB16/18/24/30/36bpp、YUV422 16/20/24bpp、YUV420 12bpp包&…