#026 TimePicker

呼び出し元INPUTの直下へ時・分・秒の列を表示し、選択した時刻だけを返す共通Picker UI。commit / OUTは呼び出し元UIの責務。

v1.0.8DevelopmentNo commit / OUTTheme#022 + #040
UI-026 → DOC-0026

Dependencies

#001 Bone Core確認中
#002 Bone Joint確認中
#020 Bone Label確認中
#022 Hover Border Effect確認中
#040 ColorPicker確認中
#026 TimePicker Runtime確認中

#001/#002は接続イメージ、#022/#040はPreview外側Trigger Effect設定に使用。TimePicker Runtime本体の責務は変更しません。

Property

Property 表示言語
選択後に閉じる
時 列
分 列
秒 列
無効読取専用
親要素設定

親依存ONではPreviewのCaller INPUT＋時計ボタンを同一親要素内で確認します。#026 Runtime Public APIには親依存optionを追加しません。

マウスオーバー時の枠Effect（#022）

Caller INPUT＋時計ボタンを含むTimePicker Trigger全体と、開いている時・分・秒の各値へ #022 Hover Border Effectをtrigger=mouseoverで適用します。Effect色は#040 ColorPickerのsolid-only Callerです。

Preview

時刻を選択しても呼び出し元INPUTの値は自動変更しません。

Caller INPUT09:30
Picker Selected09:30
Last Event-
Class リスト / Public API
Public ObjectBoneTimePicker
Classなし（Factory API）
FactoryBoneTimePicker.create(anchor, options)
InstanceHTMLElement + BoneTimePicker.isInstance()

#026 v1.0.8 は架空Classを追加せず、実在する BoneTimePicker Public Object / Factory APIを表示します。

Class / Public API・使用方法・操作説明を1つのガイドで確認できます。

HTML Functional Class

Normal-use Classbf-timepicker
RuntimeBoneTimePicker v1.0.8
HTML Property17件
JS Callback3件

<input class="bf-timepicker" value="09:30" data-step="15"> のように、通常利用では bf-timepicker 1個を指定します。旧API別Class方式は通常利用仕様ではありません。

<input class="bf-timepicker" value="09:30"
       data-min="08:00" data-max="18:00" data-step="15"
       data-theme="dark" data-icon-visual="emoji">

TimePickerは選択結果をRETURNしますが、Caller INPUT.valueを自動commitしません。詳細・全Property・全API・Error Codeは DOC-0026 を参照してください。

接続イメージ

固定HTMLではなく #002 BoneJoint.evaluate() の実判定結果を5ケース表示し、線も BoneJoint.drawLine() で実描画します。

IN 接続線
RETURN 接続線
型不一致
接続エラー / 不存在

Smoke Test / Validation Report

NOT RUN
実行日時-
検査件数0件
PASS0件
FAIL0件
Version1.0.8

Smoke Test 結果 NOT RUN

Smoke Testは未実行です。

Validation 結果 NOT RUN

Validationは未実行です。

Runtime Console

Return Contract

{}

Completion

Component#026 TimePicker
Version1.0.8
StatusDevelopment
Runtime QA未実行
Completion Flagfalse
Runtime QA ALL PASS後に完了できます。