Time Field 时间输入

分段输入时、分、秒。默认使用中文、24 小时制和分钟精度，不提供下拉列表。

命令行安装

npx @loongship-kit/ui add time-field

基础用法

––:––

预计离港：未填写

查看代码

<script setup lang="ts">
import { Time } from '@internationalized/date'
import { shallowRef } from 'vue'
import { TimeField } from '@/components/loongship/time-field'

const time = shallowRef<Time>()
</script>

<template>
  <TimeField v-model="time" name="departureTime" aria-label="预计离港时间" />
</template>

秒精度与步进

09:30:15

12:00

查看代码

<template>
  <div class="vp-demo-showcase-column time-field-demo-control">
    <TimeField v-model="preciseTime" granularity="second" :step="{ second: 15 }" step-snapping />
    <TimeField
      v-model="limitedTime"
      :step="{ minute: 15 }"
      :min-value="new Time(8, 0)"
      :max-value="new Time(18, 0)"
    />
  </div>
</template>

键盘与步进吸附

方向键可调整当前分段，左右键在分段间移动。stepSnapping 会在输入完成后将值吸附到最近的步长。

状态

12:00

12:00

查看代码

<template>
  <div class="vp-demo-showcase-column time-field-demo-control">
    <TimeField disabled :default-value="limitedTime" />
    <TimeField readonly :default-value="limitedTime" />
  </div>
</template>

时间值不包含时区

Time 表示不带日期和时区的墙上时间。若接口需要时间戳，应由业务先将它与明确的日期、IANA 时区组合，组件不会替业务推断时区，也不会处理秒或毫秒边界。

API

属性

属性	类型	默认值	说明
v-model	Time | null	-	当前时间；清空时发出 undefined
defaultValue	Time	-	非受控初始时间
defaultPlaceholder	Time	00:00	空值时分段占位基准
locale	string	'zh-CN'	本地化格式
hourCycle	12 | 24	24	12 或 24 小时制
granularity	'hour' | 'minute' | 'second'	'minute'	最小编辑精度
step	{ hour?, minute?, second? }	1	各分段调整步长
stepSnapping	boolean	false	输入完成后吸附步长
minValue	Time	-	最早有效时间
maxValue	Time	-	最晚有效时间
clearable	boolean	true	是否在有值时显示清空按钮
disabled	boolean	false	禁用时间输入
readonly	boolean	false	只读状态
required	boolean	false	必填状态
id	string	-	元素 ID
name	string	-	表单字段名
clearLabel	string	'清空时间'	清空按钮可访问名称
class	ClassValue	-	根节点自定义类名

事件

事件	参数	说明
update:modelValue	value: Time | undefined	时间值改变时触发
clear	—	清空时间值时触发

插槽

无内容插槽。