時刻ピッカーTimePicker
Experimental

時と分を選択し、24時間表記の値として扱う時刻入力です。

プレビュー

状態とバリエーション

24時間表記

表示と保存値を24時間表記の `HH:mm` に揃えます。

24時間表記で表示しています。保存される値は「14:30」です。

12時間表記

画面上は午前/午後で選べるようにし、保存値は24時間表記に統一します。

12時間表記で表示しています。保存される値は「09:30」です。

15分単位

予約やスケジュールでは分の選択肢を絞れます。

24時間表記で表示しています。保存される値は「14:30」です。

無効化

変更できない理由はツールチップと補足文で説明します。

変更が必要な場合は下書きに戻してください。

プロパティ

表は横にスクロールできます
プロパティ初期値説明
valuestring-24時間表記の `HH:mm` 値です。空文字は未設定として扱います。
onValueChange(value: string) => void-値が変わった時に呼ばれます。返る値は常に `HH:mm` です。
hour12booleanfalse12時間表記にし、午前/午後を選べるようにします。
minuteStep1 | 5 | 10 | 15 | 301分の選択単位です。
hourLabel / minuteLabel / periodLabelstring-時・分・午前/午後の各選択欄に付ける、支援技術向けのラベルです。
disabledbooleanfalse時刻を変更できない状態にします。理由はツールチップで補足します。

使い方

Loading...