TimePicker 时间选择器

用于选择指定时间。

基本用法

无默认值

:

:

有默认值（非受控）

:

:

有固定值（受控）

:

:

一般用法

:

:

v-model 用法

:

:

<template>
  <h4>无默认值</h4>
  <i-time-picker />
  <h4>有默认值（非受控）</h4>
  <i-time-picker :defaultValue="currentValue" />
  <h4>有固定值（受控）</h4>
  <i-time-picker :modelValue="currentValue" />
  <h4>一般用法</h4>
  <i-time-picker :modelValue="currentValue" @change="handleChange" />
  <h4>v-model 用法</h4>
  <i-time-picker v-model="currentValue" />
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref('12:34:56')

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>

显示代码复制代码复制代码

禁用状态

可通过 disabled 属性控制为禁用状态。

:

:

<template>
  <i-time-picker disabled />
</template>

显示代码复制代码复制代码

不同触发方式

可通过 trigger 属性指定下拉菜单触发方式，默认为 click。

:

:

:

:

:

:

<template>
  <div className="idesign-demo-block-row">
    <i-time-picker trigger="click" />
    <i-time-picker trigger="hover" />
    <i-time-picker trigger="context-menu" />
  </div>
</template>

显示代码复制代码复制代码

不同时间类型

可通过 format 属性指定不同的时间类型，默认为 HH:mm:ss，点击查看各类型详情。

24小时制 - 时分秒选择器

:

:

24小时制 - 时分选择器

:

12小时制 - 时分秒选择器

:

:

12小时制 - 时分选择器

:

分秒选择器

:

<template>
  <h4>24小时制 - 时分秒选择器</h4>
  <i-time-picker
    format="HH:mm:ss"
    v-model="currentValue"
  />
  <h4>24小时制 - 时分选择器</h4>
  <i-time-picker
    format="HH:mm"
    v-model="currentValue"
  />
  <h4>12小时制 - 时分秒选择器</h4>
  <i-time-picker
    format="hh:mm:ss A"
    v-model="currentValue"
  />
  <h4>12小时制 - 时分选择器</h4>
  <i-time-picker
    format="hh:mm"
    v-model="currentValue"
  />
  <h4>分秒选择器</h4>
  <i-time-picker
    format="mm:ss"
    v-model="currentValue"
  />
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref('12:34:56')
</script>

显示代码复制代码复制代码

自定义步长

可通过 steps 属性指定时间面板选择步长，默认为 [1, 1, 1]。

默认步长

:

:

分秒步长设为 5

:

:

<template>
  <h4>默认步长</h4>
  <i-time-picker :steps="[1, 1, 1]" />
  <h4>分秒步长设为 5</h4>
  <i-time-picker :steps="[1, 5, 5]" />
</template>

显示代码复制代码复制代码

TimePicker Attributes

属性	说明	类型	默认值
modelValue / v-model	时间固定值（受控）	string	--
defaultValue	时间默认值（非受控）	string	当前时间
trigger	触发方式	"hover"〡"click"〡"context-menu"	click
disabled	是否禁用选择器	boolean	false
format	用于格式化时间，详细文档	string	HH:mm:ss
steps	[时, 分, 秒] 时间间隔步数	(string〡number)[]	[1, 1, 1]

TimePicker Events

属性	说明	类型	默认值
change	选中时间变化时触发	(value: string) => void	--
trigger	切换时间面板时触发	(visible: boolean) => void	--