TimePicker

インポート

import { TimePicker } from '@caroainc/ui-components/client'

個別サブパス:

import { TimePicker } from '@caroainc/ui-components/time-picker'

注意: TimePicker は iconName propで実行時にアイコンを選べる設計のため、内部で全アイコンを参照する動的解決を経由します。このサブパスを使ってもlucide-reactの全アイコンがバンドルに含まれるため、バンドルサイズ削減効果はありません（他コンポーネントのサブパスとは異なります）。他の依存を絞る目的では有効です。

基本的な使い方

const [time, setTime] = React.useState('09:30')
 
<TimePicker value={time} onChange={setTime} />

サイズ

3つのサイズが用意されています（DatePickerと同じ高さ体系）。

default

<TimePicker size="sm" value={time} onChange={setTime} />
<TimePicker size="default" value={time} onChange={setTime} />
<TimePicker size="lg" value={time} onChange={setTime} />

時間間隔

interval で時間の間隔（分）を指定できます。デフォルトは30分です。

15分間隔

30分間隔（デフォルト）

60分間隔

// 15分間隔
<TimePicker value={time} onChange={setTime} interval={15} />
 
// 30分間隔（デフォルト）
<TimePicker value={time} onChange={setTime} interval={30} />
 
// 60分間隔
<TimePicker value={time} onChange={setTime} interval={60} />

時間範囲の制限

minTime と maxTime で選択可能な時間範囲を制限できます。

<TimePicker
  value={time}
  onChange={setTime}
  minTime="08:00"
  maxTime="18:00"
/>

プレースホルダー

<TimePicker
  value={time}
  onChange={setTime}
  placeholder="開始時刻を選択"
/>

無効状態

<TimePicker value="09:30" disabled />

アイコン非表示

showIcon={false} でアイコンを非表示にできます。

<TimePicker value={time} onChange={setTime} showIcon={false} />

カスタムアイコン

iconName でアイコンを変更できます。デフォルトは Clock です。

<TimePicker value={time} onChange={setTime} iconName="AlarmClock" />

実際の使用例

営業時間の設定

開始時刻

終了時刻

import { Field, FieldLabel, TimePicker } from '@caroainc/ui-components/client'
 
function BusinessHoursForm() {
  const [startTime, setStartTime] = React.useState('09:00')
  const [endTime, setEndTime] = React.useState('18:00')
 
  return (
    <div className="flex gap-4">
      <Field>
        <FieldLabel>開始時刻</FieldLabel>
        <TimePicker value={startTime} onChange={setStartTime} />
      </Field>
      <Field>
        <FieldLabel>終了時刻</FieldLabel>
        <TimePicker value={endTime} onChange={setEndTime} />
      </Field>
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`string`	`-`	選択された時間 (HH:mm 形式)
`onChange`	`(time: string) => void`	`-`	時間が変更された時のコールバック
`interval`	`number`	`30`	時間の間隔（分）
`minTime`	`string`	`'00:00'`	選択可能な最小時間 (HH:mm 形式)
`maxTime`	`string`	`'23:59'`	選択可能な最大時間 (HH:mm 形式)
`placeholder`	`string`	`'時間を選択'`	プレースホルダーテキスト
`disabled`	`boolean`	`false`	無効状態
`showIcon`	`boolean`	`true`	アイコンを表示するか
`iconName`	`IconName`	`'Clock'`	表示するアイコン
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	トリガー入力欄のサイズ（DatePickerと同じ高さ体系）
`className`	`string`	`-`	追加のクラス名

id / name / required / aria-invalid / aria-describedby など、上記に無い標準のinput属性はトリガー入力欄へそのまま透過されます（value / onChange / defaultValue / placeholder / disabled / type は除外されます）。

注意事項

時間の形式は HH:mm です（例: "09:30", "14:00"）
interval は分単位で指定します
ドロップダウンを開いた時、選択中の時間に自動スクロールします
ドロップダウン内は矢印キー（↑/↓）でフォーカス移動できます（ローミングタブインデックス）
ref を渡すとトリガー入力欄（HTMLInputElement）が取得できます

TimePicker

On this page