TimePicker 時刻ピッカー

LhTimePicker は時刻を選択するためのピッカーコンポーネントで、時・分・秒を正確に選択できます。

基本的な使い方

vue

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

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

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

vue

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

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

無効状態

vue

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

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

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

vue

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

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

時刻のフォーマット

vue

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

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

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

vue

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

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

クリアボタン

vue

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

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

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

vue

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

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

時刻範囲のカスタマイズ

vue

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

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

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

vue

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

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

サイズ

vue

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

vue

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

ステップ

vue

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

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

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

vue

<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 で各列のステップをカスタマイズします。

vue

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

vue

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

TimePicker 時刻ピッカー ​

基本的な使い方 ​

無効状態 ​

時刻のフォーマット ​

クリアボタン ​

時刻範囲のカスタマイズ ​

サイズ ​

ステップ ​

プレースホルダー、読み取り専用、方向キー操作 ​

TimePicker API ​

TimePicker Events ​

型定義 ​