使用方法

TimeInput 编辑一天里的时间。值是 ISO 时间，HH:MM 或 HH:MM:SS，没有选择时是 null。

<script setup lang="ts">
import { TimeInput } from '@astryx-vue/core/TimeInput'
import { shallowRef } from 'vue'

const time = shallowRef<string | null>('14:30')
</script>

<template>
  <TimeInput v-model="time" label="时间" />
</template>

默认按 12 小时显示。方向键按 increment 分钟步进。细指针下是文本框。adaptive-native 在粗指针上用系统时间控件；adaptive-bottom-sheet 在粗指针上用底部时分滚轮；bottom-sheet 不论指针都用滚轮。需要秒、步进不是 1 分钟，或设了预设间隔时，系统控件退回文本框，滚轮不受这个限制。占位符和清除文案跟随语言。

解剖

部分	说明
时钟图标	前导时钟图标。它标识这个字段，并在原生模式打开浏览器或系统选择器。
时间控件	原生模式是真正的 input type=time。精细指针、presentation 为 text-input、需要秒或自定义步进时，是 Astryx 可编辑的文本字段。
清除按钮	尾部用来重置值的按钮。hasClear 为真且已经有值时显示。
状态图标	尾部图标，表示错误、警告或成功。
转圈	加载时替换尾部内容，表示异步操作还在进行。

最佳实践

指引	实践
推荐	只有一段时间合法时，设置 min 和 max。
推荐	产品本身用 24 小时制时，设置 hourFormat="24h"。
避免	在这里收集日期。日期用 DateInput，日期加时间用 DateTimeInput。

示例

限制范围

Dinner reservation

Evening seating: 5 PM – 10 PM

晚餐只接受下午 5 点到晚上 10 点。

格式

Format variations for different contexts

24-hour

With seconds

24 小时制，以及保留秒的值。

步进

Appointment slot

Use arrow keys to change by 15 minutes

方向键每次移动 15 分钟。

状态

Disabled field

Error message

Time must be during business hours

Warning message

Early morning — are you sure?

Success message

Time slot is available

禁用、错误、警告和成功。

底部面板

Start

不论指针类型，都用底部的小时和分钟滚轮。