vs中做网站设置背景图片,室内装修设计师,网站商城建设需求表,加强网站安全建设说明报告范文在同一个选择器里选择日期和时间
TIP
日期时间选择器来自日期选择器和时间选择器的组合。 关于属性的更详细解释#xff0c;请参阅日期选择器和时间选择器。
TIP
在 SSR 场景下#xff0c;您需要将组件包裹在 client-only/client-only 之中 (如: Nuxt) 和…在同一个选择器里选择日期和时间
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 控制下拉列表面板输入框中显示的文本格式 - 日期和时间范围# 设置type为datetimerange即可选择日期和时间范围
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只读boolean—falsedisabled禁用boolean—falseeditable文本框可输入boolean—trueclearable是否显示清除按钮boolean—truesize输入框尺寸stringlarge/default/smalldefaultplaceholder非范围选择时的占位内容string——start-placeholder范围选择时开始日期的占位内容string——end-placeholder范围选择时结束日期的占位内容string——arrow-control是否使用箭头进行时间选择boolean—falsetype显示类型stringyear/month/date/datetime/ week/datetimerange/daterangedateformat显示在输入框中的格式string参见 date formatsYYYY-MM-DD HH:mm:sspopper-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在范围选择器里取消两个日期面板之间的联动boolean—falseprefix-icon自定义前缀图标组件string | Component—Dateclear-icon自定义清除图标string | Component—CircleCloseshortcuts设置快捷选项需要传入数组对象object[{ text: string, value: date / function }]——disabled-date一个用来判断该日期是否被禁用的函数接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function(Date)——cell-class-name设置自定义类名Function(Date)——teleported是否将 datetime-picker 的下拉列表插入至 body 元素booleantrue / falsetrue
事件#
事件名说明回调参数change用户确认选定的值时触发valueblur在组件 Input 失去焦点时触发(e: FocusEvent)focus在组件 Input 获得焦点时触发(e: FocusEvent)calendar-change如果用户没有选择日期那默认展示当前日的月份。 选中日历日期后会执行的回调只有当 datetimerange 才生效[Date, Date]visible-change当 DateTimePicker 的下拉列表出现/消失时触发出现时为true隐藏时为false
方法#
方法名说明参数focus使 input 获取焦点—
Slots#
插槽名说明default自定义单元格内容range-separator自定义范围分割符内容
源代码#
文档
在 Crowdin 上编辑此页面
