TimePicker 시간 선택기

LhTimePicker는 시, 분, 초를 정밀하게 선택할 수 있는 시간 선택기 컴포넌트입니다.

기본 사용법

기본 사용법

03:32:51

<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:51

<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:51

<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:51

<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:51

03:32:51

03:32:51

<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:51

<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:51

<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]