TimePicker 時間選擇器

LhTimePicker 是一個用於選擇時間的選擇器元件，支援時、分、秒的精確選擇。

基礎用法

基礎用法

03:32:52

<script setup lang="ts">
import { ref } from 'vue'

const baseTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="baseTime" />
</template>

<script>
export default {
  data() {
    return { baseTime: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="baseTime" />
</template>

停用狀態

停用狀態

03:32:52

<script setup lang="ts">
import { ref } from 'vue'

const disabledTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

<script>
export default {
  data() {
    return { disabledTime: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

時間格式化

時間格式化

03:32

<script setup lang="ts">
import { ref } from 'vue'

const formatTime1 = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

<script>
export default {
  data() {
    return { formatTime1: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

清除按鈕

清除按鈕

03:32:52

<script setup lang="ts">
import { ref } from 'vue'

const clearTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

<script>
export default {
  data() {
    return { clearTime: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

自訂時間範圍

自訂時間範圍

08:32:52

<script setup lang="ts">
import { ref } from 'vue'

const rangeTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

<script>
export default {
  data() {
    return { rangeTime: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

尺寸

尺寸

03:32:52

03:32:52

03:32:52

<script setup lang="ts">
import { ref } from 'vue'

const smallTime = ref(new Date())
const mediumTime = ref(new Date())
const largeTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

<script>
export default {
  data() {
    return {
      smallTime: new Date(),
      mediumTime: new Date(),
      largeTime: new Date(),
    }
  },
}
</script>

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

步進

步進

03:32:52

<script setup lang="ts">
import { ref } from 'vue'

const stepTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

<script>
export default {
  data() {
    return { stepTime: new Date() }
  },
}
</script>

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

佔位、唯讀與方向鍵控制

placeholder 自訂佔位文字；readonly 唯讀；arrow-control 用方向鍵在欄間捲動選擇；start / end 限定時間範圍；step-hour / step-minute / step-second 自訂各欄步進。

placeholder / readonly

03:32:52

<script setup lang="ts">
import { ref } from 'vue'
const tp1 = ref(null)
const tp2 = ref(new Date())
</script>

<template>
  <!-- 佔位文字 -->
  <LhTimePicker v-model="tp1" placeholder="选择提醒时间" />
  <!-- 唯讀 -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

<script>
export default {
  data() {
    return {
      tp1: null,
      tp2: new Date(),
    }
  },
}
</script>

<template>
  <!-- 佔位文字 -->
  <LhTimePicker v-model="tp1" placeholder="选择提醒时间" />
  <!-- 唯讀 -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

TimePicker API

屬性	說明	類型	預設值
modelValue	綁定的時間	Date	null
size	尺寸	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	是否停用	boolean	false
clearable	是否顯示清除按鈕	boolean	true
placeholder	佔位文字（未傳時按 format 生成，取語言包 timepicker.hour/minute/second）	string	''
format	時間格式	string	'HH:mm:ss'
readonly	輸入框唯讀	boolean	true
arrowControl	是否顯示箭頭	boolean	false
start	開始小時	number	0
end	結束小時	number	24
stepHour	小時步進	number	1
stepMinute	分鐘步進	number	1
stepSecond	秒步進	number	1
sx	快速版面配置屬性（如 { mt: 2, w: '50%' }），轉內聯樣式作用於觸發器根元素（浮層面板不受影響）	LhSxProps	—

TimePicker Events

事件名	說明	類型
update:model-value	值改變時觸發	(value: Date) => void
change	值確認改變時觸發	(value: Date) => void

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/time-picker/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhTimePickerProps

export interface LhTimePickerProps {
  modelValue?: Date | null
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  arrowControl?: boolean
  start?: number
  end?: number
  stepHour?: number
  stepMinute?: number
  stepSecond?: number
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhComponentSize _{（來自 @lh-ui/share/core/shared）}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]