TimePicker

LhTimePicker is used to select a specific time.

Basic Usage

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LhTimePicker } from '@lh-ui/vue3'

const timeVal = ref('')
</script>

<template>
  <LhTimePicker v-model="timeVal" placeholder="Select time" />
</template>

<script>
import { LhTimePicker } from '@lh-ui/vue3'

export default {
  components: { LhTimePicker },
  data() {
    return {
      timeVal: '',
    }
  },
}
</script>

<template>
  <LhTimePicker v-model="timeVal" placeholder="Select time" />
</template>

Time Range

Time Range

00:00:00

<script setup lang="ts">
import { ref } from 'vue'
import { LhTimePicker } from '@lh-ui/vue3'

const timeRange = ref([])
</script>

<template>
  <!-- Time Range -->
  <LhTimePicker v-model="timeRange" type="timerange" placeholder="Range" />
</template>

<script>
import { LhTimePicker } from '@lh-ui/vue3'

export default {
  components: { LhTimePicker },
  data() {
    return {
      timeRange: [],
    }
  },
}
</script>

<template>
  <!-- Time Range -->
  <LhTimePicker v-model="timeRange" type="timerange" placeholder="Range" />
</template>

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/time-picker/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

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?: LhSxProps
}

LhComponentSize _{(from @lh-ui/share/core/shared)}

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

Placeholder, readonly and arrow control

placeholder sets the hint text; readonly blocks editing; arrow-control navigates the columns with arrow keys; start / end bound the selectable time; step-hour / step-minute / step-second customize column steps.

placeholder / readonly

03:32:47

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

<template>
  <!-- Placeholder -->
  <LhTimePicker v-model="tp1" placeholder="Pick a reminder time" />
  <!-- Readonly -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

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

<template>
  <!-- Placeholder -->
  <LhTimePicker v-model="tp1" placeholder="Pick a reminder time" />
  <!-- Readonly -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

Size, disabled, clearable and format

size controls the input size; disabled blocks interaction; clearable shows the clear button; format customizes the displayed format.

size / disabled / clearable / format

03:32

03:32:47

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

<template>
  <LhTimePicker v-model="tp4" size="small" clearable format="HH:mm" />
  <LhTimePicker v-model="tp5" disabled />
</template>

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

<template>
  <LhTimePicker v-model="tp4" size="small" clearable format="HH:mm" />
  <LhTimePicker v-model="tp5" disabled />
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	Date	null
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	Disabled	boolean	false
clearable	Clearable	boolean	true
placeholder	Placeholder (generated from format using the timepicker.hour/minute/second locale messages when unset)	string	''
format	Time 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	Shorthand layout props (e.g. { mt: 2, w: '50%' }), applied as inline styles on the trigger root element (the floating panel is not affected)	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	Value change	(value: string | string[]) => void
change	Selection changed	(time, timeString) => void
clear	Clear clicked	() => void