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 で、パネルの確定ボタンへフォーカスして到達できます。