TimePicker 时间选择器

TimePicker 概述

选择或输入标准时间，支持选择范围。

TimePicker 代码演示

基础用法

设置属性 type 为 time 或 timerange 分别显示 选择单个时间和 选择范围时间类型。
设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。

时间格式

设置属性 format 可以改变时间的显示格式，详见Date

名称	说明	示例
yyyy	年份（四位）	2016
yy	年份（两位）	16
MM	月份（两位）	01
M	月份（一位）	1
MMMM	月份（英文）	January
MMM	月份（英文简写）	Jan
dd	日期（两位）	01
d	日期（一位）	1
Do	日期（简写）	1st
DD	星期（两位）	00
D	星期（一位）	0
dddd	星期（英文）	Monday
ddd	星期（英文简写）	Mon
HH	小时（24小时制两位）	01
H	小时（24小时制一位）	1
hh	小时（12小时制两位）	01
h	小时（12小时制一位）	1
mm	分钟（两位）	01
m	分钟（一位）	1
ss	秒钟（两位）	01
s	秒钟（一位）	1
SSS	毫秒（三位）	019
SS	毫秒（两位）	01
S	毫秒（一位）	1
A	上午与下午（大写）	AM/PM
a	上午与下午（小写）	am/pm
ZZ	时区	+0800

以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如：

• yyyy年M月d日：2016年1月1日
• MM/dd/yy：12/24/16
• H点m分s秒：9点41分0秒

。
注意，format 只是改变显示的格式，并非改变 value 值。

选择时分

组件浮层中的列会随着 format 变化，当略去 format 中的秒时，浮层中对应的列也会消失。

不可选时间

可以使用 disabled-hours disabled-minutes disabled-seconds 组合禁止用户选择某个时间。
使用 hide-disabled-options 可以直接把不可选择的项隐藏。

带有确认操作

设置属性 confirm，选择器会有清空和确定按钮。
确认按钮并没有影响时间的正常选择。

手动控制组件

对于一些定制化的场景，可以使用 slot 配合参数 open、confirm 及事件来手动控制组件的显示状态，详见示例和 API。

尺寸

通过设置属性 size 为 large 或 small 可以调整选择器尺寸为大或小，默认不填为中。

时间选择器出现的位置

时间选择器出现的位置，可选值为 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end

是否禁用/只读/编辑

disabled 为 true 时不能提交到后台，不能弹出日期选择器； readonly 为 true 时不能弹出选择器,但值可以提交到后台； editable 为 false 时，输入框不能编辑。

事件使用

on-change 时间发生变化时触发； on-open-change 弹出时间和关闭时间时触发； on-ok 在 confirm 模式下有效，点击确定按钮时触发。

TimePicker API

TimePicker props

属性	说明	类型	默认值
type	显示类型，可选值为 time、 timerange	String	time
value	时间，可以是 JavaScript 的 Date，例如 new Date ()，也可以是标准的时间格式，点击右边查看 注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用	Date 名称 说明 示例 yyyy 年份（四位） 2016 yy 年份（两位） 16 MM 月份（两位） 01 M 月份（一位） 1 MMMM 月份（英文） January MMM 月份（英文简写） Jan dd 日期（两位） 01 d 日期（一位） 1 Do 日期（简写） 1st DD 星期（两位） 00 D 星期（一位） 0 dddd 星期（英文） Monday ddd 星期（英文简写） Mon HH 小时（24小时制两位） 01 H 小时（24小时制一位） 1 hh 小时（12小时制两位） 01 h 小时（12小时制一位） 1 mm 分钟（两位） 01 m 分钟（一位） 1 ss 秒钟（两位） 01 s 秒钟（一位） 1 SSS 毫秒（三位） 019 SS 毫秒（两位） 01 S 毫秒（一位） 1 A 上午与下午（大写） AM/PM a 上午与下午（小写） am/pm ZZ 时区 +0800 以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如： yyyy年M月d日：2016年1月1日 MM/dd/yy：12/24/16 H点m分s秒：9点41分0秒	-
format	展示的时间格式	Date 名称 说明 示例 yyyy 年份（四位） 2016 yy 年份（两位） 16 MM 月份（两位） 01 M 月份（一位） 1 MMMM 月份（英文） January MMM 月份（英文简写） Jan dd 日期（两位） 01 d 日期（一位） 1 Do 日期（简写） 1st DD 星期（两位） 00 D 星期（一位） 0 dddd 星期（英文） Monday ddd 星期（英文简写） Mon HH 小时（24小时制两位） 01 H 小时（24小时制一位） 1 hh 小时（12小时制两位） 01 h 小时（12小时制一位） 1 mm 分钟（两位） 01 m 分钟（一位） 1 ss 秒钟（两位） 01 s 秒钟（一位） 1 SSS 毫秒（三位） 019 SS 毫秒（两位） 01 S 毫秒（一位） 1 A 上午与下午（大写） AM/PM a 上午与下午（小写） am/pm ZZ 时区 +0800 以上是 HUI 支持的日期格式，你可以自由组合出你需要的类型，例如： yyyy年M月d日：2016年1月1日 MM/dd/yy：12/24/16 H点m分s秒：9点41分0秒	HH:mm:ss
steps	下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。(初始值和 steps 不要同时设置)	Array	[]
placement	时间选择器出现的位置，可选值为 top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end	String	bottom-start
placeholder	占位文本	String	选择时间
confirm	是否显示底部控制栏	Boolean	false
open	手动控制时间选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用	Boolean	null
size	尺寸，可选值为 large 和 small 或者不设置	String	-
disabled	是否禁用选择器	Boolean	false
clearable	是否显示清除按钮	Boolean	true
readonly	完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效	Boolean	false
editable	文本框是否可以输入，只在没有使用 slot 时有效	Boolean	true
transfer	是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果	Boolean	false
tabindex	设置输入框 tabindex（v1.0.47）	String | Number	-1

TimePicker events

事件名	说明	返回值
on-change	时间发生变化时触发	已经格式化后的时间，比如 09:41:00
on-open-change	弹出浮层和关闭浮层时触发	true | false
on-ok	点击确定按钮时触发	-
on-clear	在清空日期时触发	-
on-focus	获取焦点时触发	-
on-blur	on-blur	-

TimePicker slot

名称	说明
无	自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例

TimePicker methods

方法	说明
focus	通过 this.$refs[name].focus() 调用,使当前输入框获取焦点,并打开选择面板(此方法只在1.0.9或以上版本有效)
blur	手动取消输入框焦点 ( this.$refs[name].blur() )(此属性只在 1.0.10 或以上版本有效)