TimePicker 시간 선택기

시간 선택기입니다. 롤러 열로 시/분/초를 선택하고, format 에 ss 가 없으면 초 열을 자동으로 숨깁니다. arrowControl 로 열 머리의 화살표 조작으로 전환할 수 있습니다. 패널은 body 에 마운트됩니다 (Vue2 는 Teleport 가 없습니다).

시간 선택

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTimePicker v-model="t1" format="HH:mm:ss" placeholder="시간 선택" clearable />
      <LhTimePicker v-model="t2" format="HH:mm" placeholder="시분(초 열 없음)" size="small" />
      <LhTimePicker v-model="t3" format="HH:mm:ss" arrow-control placeholder="화살표 조작" size="large" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" disabled placeholder="비활성화" />
      <LhTimePicker v-model="t1" format="HH:mm:ss" readonly placeholder="읽기 전용" />
    </div>
    <LhTimePicker
      v-model="t4"
      format="HH:mm:ss"
      :step-hour="2"
      :step-minute="15"
      :step-second="30"
      placeholder="스텝: 시 2 / 분 15 / 초 30"
    />
    <p class="demo-note">시분초: {{ fmt(t1) }}｜시분: {{ fmt(t2) }}｜화살표: {{ fmt(t3) }}｜스텝: {{ fmt(t4) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    t1: new Date(2026, 9, 3, 14, 30, 0),
    t2: null,
    t3: null,
    t4: null,
  }),
  methods: {
    fmt(v) {
      if (!(v instanceof Date)) return '(선택 안 됨)'
      const p = (n) => String(n).padStart(2, '0')
      return p(v.getHours()) + ':' + p(v.getMinutes()) + ':' + p(v.getSeconds())
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	현재 선택	Date \| null	—
mode	모드 (날짜/시간 연동을 위해 예약됨, 현재는 시간 열로 렌더링)	LhTimePickerMode	—
size	크기	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	비활성화 / 지우기 가능 / 읽기 전용	boolean	false
placeholder	플레이스홀더 텍스트	string	언어 패키지
format	표시 형식 (HH:mm:ss, HH:mm); ss 가 없으면 초 열을 숨김	string	'HH:mm:ss'
arrowControl	화살표 조작 (열 머리의 위/아래 버튼)	boolean	false
stepHour / stepMinute / stepSecond	시 / 분 / 초 스텝	number	1
teleportTarget	팝업 레이어 마운트 대상	string \| HTMLElement	'body'
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

input(v-model), change (value)

접근성

각 열은 role="spinbutton" + aria-valuenow/min/max 이고, 롤러와 화살표 두 가지 조작 모두 키보드 방향키를 지원합니다. 트리거는 role="combobox" + aria-expanded 이고, 패널의 확인 버튼까지 포커스가 도달할 수 있습니다.