時刻ピッカーTimePickerExperimental
時と分を選択し、24時間表記の値として扱う時刻入力です。
プレビュー
状態とバリエーション
24時間表記
表示と保存値を24時間表記の `HH:mm` に揃えます。
12時間表記
画面上は午前/午後で選べるようにし、保存値は24時間表記に統一します。
15分単位
予約やスケジュールでは分の選択肢を絞れます。
無効化
変更できない理由はツールチップと補足文で説明します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | 24時間表記の `HH:mm` 値です。空文字は未設定として扱います。 |
| onValueChange | (value: string) => void | - | 値が変わった時に呼ばれます。返る値は常に `HH:mm` です。 |
| hour12 | boolean | false | 12時間表記にし、午前/午後を選べるようにします。 |
| minuteStep | 1 | 5 | 10 | 15 | 30 | 1 | 分の選択単位です。 |
| hourLabel / minuteLabel / periodLabel | string | - | 時・分・午前/午後の各選択欄に付ける、支援技術向けのラベルです。 |
| disabled | boolean | false | 時刻を変更できない状態にします。理由はツールチップで補足します。 |
使い方
import * as React from "react";
import { FormControl, FormGroup, FormLabel, TimePicker } from "@gunjo/ui";
export function MeetingTimeField() {
const [time, setTime] = React.useState("09:00");
return (
<FormGroup className="w-full max-w-sm">
<FormLabel>会議時刻</FormLabel>
<FormControl>
<TimePicker
value={time}
onValueChange={setTime}
minuteStep={15}
hourLabel="時"
minuteLabel="分"
/>
</FormControl>
</FormGroup>
);
}