Bone Flow #032 - DateTimeBox v1.0.23

Local DateTime / 通常入力は秒まで / 通常commitは.000000 / 呼び出し時だけ小数秒6桁をOUTへ自動付与・Preview表示 / 表示デフォルト3桁 / Date.parse・timezone変換なし / #002 Joint WAIT・BLOCKED

Development Standard v1.0DATA .ffffffDISPLAY default .fffNo Dependency Lock

使用コンポーネント

#001 Bone Core確認中

#002 Bone Joint確認中

#024 Bone Calendar確認中

#025 Bone DatePicker確認中

#026 Bone TimePicker確認中

#022 Bone Hover Border Effect確認中

#017 Bone TextRuntime非依存 / 表示責務境界

プロパティ設定

プロパティ表示言語

値 (value / 秒まで)

プレースホルダー

最小日時 (min)

最大日時 (max)

刻み分 (step)

小数秒表示桁数

必須

読み取り専用

無効

テーマ

背景色

外見

親要素に依存（親に合わせる）

非アクティブ表示

フォントサイズ / FIT

固定フォントサイズ (px)

#024 Calendar 設定（#025経由）

日付Pickerは#025 DatePickerから#024 Calendarへ正式委譲します。Theme / min / max は#032設定を共有し、日付stepは1固定です。

Picker / Calendar Icon（#026 Clockと共通）

開始曜日

Calendar locale

タスクを表示

#026 TimePicker 設定

時刻Pickerは#026 TimePickerへ正式委譲します。時列は00～23、分列は#032のstep分刻み、秒列は00～59です。分stepは秒列へ適用しません。Previewは#032従来の1つの日時候補パネルを表示し、その内部でCalendar / Timeを切り替えます。

候補表示位置

単体時の表示設定

親要素に依存がONの時、幅・高さ・表示位置・入力時文字位置は描画上無視されます。

幅 (px)

高さ (px)

表示位置（9方向）

入力時文字位置

アクティブ時の枠エフェクト

枠エフェクト

エフェクト色

Effect方向

エフェクト速度

親要素設定（プレビュー）

親の幅 (px)

親の高さ (px)

親の文字位置

親の背景色

親の文字色

親の角丸 (px)

DateTimeBox Preview

Preview準備中...

呼び出しOUT: 未実行

Annotation IN / 祝日・休日・記念日・Task

#032 DateTimeBox は calendar.annotations を #025 DatePicker 経由で #024 Calendar へ渡します。#032自身は祝日CSV取得・変換を行わず、#024で作成・保存したAnnotation JSONをそのまま使用します。

holiday / customHoliday / anniversary はアイコン＋Tooltip、task はTooltipと任意href。タスク表示ON/OFFはPropertyの「タスクを表示」で#024へ委譲します。

#024保存JSONを選択

Source: #024 sample 2026-2027

接続イメージ

#021 Shape v1.0.24 / #027 TextBox v1.0.23 と同じ Bone Joint 接続状態イメージです。中央表示のみ「DateTimeBox」に合わせています。

IN 接続線

OUT 接続線

型不一致

接続エラー／不存在終端

Security Test - Untrusted IN（Previewとは独立）

Getter / Proxy / Date object / 小数秒3桁データ / 実在しない日時をDateTimeBoxへ渡し、既存値が破壊されないことを確認します。

Untrusted Source-Joint IN

Security Gate未実行-理由: -

Security DateTimeBox2026-08-08T09:30:15.000000Preview本体とは別Instance

未実行

OUT WAIT / BLOCKED - #002 Joint Integration

DateTimeBoxはcommitまでを担当し、待機キュー・FIFO・BLOCK判定後の配送停止は#002 Jointへ委譲します。専用Delivery DateTimeBoxを使用し、Preview本体には干渉しません。

READY ○Target受信 0件

DateTimeBox OUTcommit data

TargetREADY

Target受信ログ: なし

Joint描画確認中...

3秒WAITで spinner → ○、線が切れず、待機日時が自動配送されたことを目視確認しました。 BLOCKで fa-ban + beat-fade、線は接続維持、Targetへ危険日時が届かなかったことを目視確認しました。

Smoke Test / Validation Report

NOT RUN

実行日時-

検査件数0件

PASS0件

FAIL0件

所要時間-

Version1.0.23

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

Runtime Console

Completion

Component#032 DateTimeBox

Version1.0.23

StatusDevelopment

Runtime QA未実行

WAIT目視未確認

BLOCK目視未確認

Completion Flagfalse

Runtime ALL PASS + WAIT/BLOCK目視確認後に完了できます。

属性	役割	値 / Default	説明
`class`	機能Class	`bone-html-class-use bone-...-...`	`bone-html-class-use` とClass一覧の機能Classを同じ `class=""` に設定します。対応Public APIと1対1です。
`data-bone-event`	起動タイミング	`load` / click / input / change / manual 等 Default: `load`	複数指定は空白またはカンマ区切り。`manual` は自動実行せず、Bridgeの `invoke()` から実行します。
`data-bone-args`	引数一括指定	JSON Array	Public APIの引数順そのままのJSON配列です。例: `["$self","$value",{}]`
`data-bone-arg-N`	引数個別指定	Nは0始まり	`data-bone-arg-0`, `data-bone-arg-1` のように1引数ずつ指定します。一括指定より個別値を補完できます。
`data-bone-once`	イベント1回限定	`true` / Default: false	click等のイベント監視を1回だけ実行したい場合に指定します。
`data-bone-append-result`	Element戻り値	`false` でappend停止 Default: append	Public APIがElementを返した場合、既定ではClass設定要素へappendします。
`data-bone-throw`	Debug再throw	`true` / Default: false	Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。

値	解決内容
`$self`	Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
`$event`	Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
`$value`	input / textarea / select等の現在の value を渡します。
`$checked`	checkbox / radio等の現在の checked(Boolean)を渡します。
`$text`	Classを設定した要素の textContent を渡します。
`$dataset`	Classを設定した要素の dataset を通常Objectとして渡します。
`$files`	file input の FileList を渡します。
`$selector:...`	...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
`$id:...`	...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
`$global:...`	window / globalThis上の指定名の値を渡します。
`$handler:...`	window / globalThis上の指定名のFunctionをコールバック引数として渡します。

結果	内容	用途
`element.__boneClassResult`	Public APIの生の戻り値	JavaScript側で元のObject / Element / primitiveをそのまま参照します。
`data-bone-class-status`	`ok` / `error`	HTML属性だけで直近のClass実行成否を確認します。
`data-bone-class-result`	戻り値のserialize結果	DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。
`bone-html-class-result`	成功CustomEvent	`detail` に componentId / className / api / value を持ちます。
`bone-html-class-error`	失敗CustomEvent	`detail` に componentId / className / api / error を持ちます。

HTML Class	`bone-datetimebox-defaults`
対応Public API	`BoneDateTimeBox.defaults`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-normalize-options`
対応Public API	`BoneDateTimeBox.normalizeOptions`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-validate-value`
対応Public API	`BoneDateTimeBox.validateValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`value`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

HTML Class	`bone-datetimebox-inspect-canonical-date-time`
対応Public API	`BoneDateTimeBox.inspectCanonicalDateTime`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-inspect-editing-date-time`
対応Public API	`BoneDateTimeBox.inspectEditingDateTime`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-format-display`
対応Public API	`BoneDateTimeBox.formatDisplay`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-create`
対応Public API	`BoneDateTimeBox.create`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`boneInput`	Object	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

HTML Class	`bone-datetimebox-is-instance`
対応Public API	`BoneDateTimeBox.isInstance`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-input`
対応Public API	`BoneDateTimeBox.getInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-date-picker`
対応Public API	`BoneDateTimeBox.getDatePicker`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-time-picker`
対応Public API	`BoneDateTimeBox.getTimePicker`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-picker`
対応Public API	`BoneDateTimeBox.getPicker`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-date-input`
対応Public API	`BoneDateTimeBox.getDateInput`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-value`
対応Public API	`BoneDateTimeBox.getValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-editing-value`
対応Public API	`BoneDateTimeBox.getEditingValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-committed-value`
対応Public API	`BoneDateTimeBox.getCommittedValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-bone`
対応Public API	`BoneDateTimeBox.getBone`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-options`
対応Public API	`BoneDateTimeBox.getOptions`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-get-state`
対応Public API	`BoneDateTimeBox.getState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-set-value`
対応Public API	`BoneDateTimeBox.setValue`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`element`	Element / Instance	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`value`	String / API許容値	`data-bone-arg-1` または `data-bone-args[1]`	`"$value"`
2	`options`	Object	`data-bone-arg-2` または `data-bone-args[2]`	`{}`

HTML Class	`bone-datetimebox-set-options`
対応Public API	`BoneDateTimeBox.setOptions`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-apply-bone`
対応Public API	`BoneDateTimeBox.applyBone`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-apply-joint-input`
対応Public API	`BoneDateTimeBox.applyJointInput`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-build-output`
対応Public API	`BoneDateTimeBox.buildOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-invoke`
対応Public API	`BoneDateTimeBox.invoke`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-connect-output`
対応Public API	`BoneDateTimeBox.connectOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-disconnect-output`
対応Public API	`BoneDateTimeBox.disconnectOutput`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-set-target-ready`
対応Public API	`BoneDateTimeBox.setTargetReady`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-datetimebox-clear-output-block`
対応Public API	`BoneDateTimeBox.clearOutputBlock`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。