Bug Report: time-only mode ignores initial Date input /バグ報告：time-only モードで Date 初期値が表示されない

[jp-ariyoshi]

Describe the bug
When using with time-picker and time-only mode, the initial value set via :model-value="Date" does not appear in the input. This happens even when the Date object is valid and reactive.

Reproduction Steps
Using Vue 3 and @vuepic/vue-datepicker@^11.0.2

model-value is a valid Date object (confirmed via console.log)

Setup uses :model-value and @update:model-value

Tried using :key to force rerender — no effect

Removing time-only fixes the problem

Expected behavior
The input should display the time extracted from the bound Date (e.g., 10:02) when the modal opens.

Actual behavior
The input appears empty. However, manually changing the time works, and the @update:model-value event correctly returns a Date.

Example code
<Datepicker
:model-value="startTime"
@update:model-value="(val) => startTime = val"
time-picker
time-only
format="HH:mm"
/>
Additional Notes
Using format="HH:mm" with time-only doesn’t help.

This issue only happens with time-only mode.

The value is correctly passed — only rendering fails.

Possible cause
Internally, time-only mode might be expecting a { hours, minutes } object rather than a full Date, even though the prop accepts Date. This inconsistency may be the root of the issue.

System Info
@vuepic/vue-datepicker: 11.0.2

Vue: 3.5.13

Browser: Chrome 125+

Live reproduction (CodeSandbox)
👉 Open this CodeSandbox

Please open the modal and observe that the time input is blank, even though startTime is a valid Date.

(日本語)
🔸バグの内容
を time-picker + time-only モードで使用した場合、:model-value="Date" によって設定された初期値が入力欄に表示されません。
値は有効な Date オブジェクトであり、リアクティブであることも確認済みです。

🔸再現手順
Vue 3 を使用

@vuepic/vue-datepicker バージョン: ^11.0.2

:model-value には Date オブジェクトを設定（console.logで確認済み）

@update:model-value を使って値をバインド

:key を使って強制再描画しても効果なし

time-only を削除すると問題なく表示される

🔸期待される動作
モーダルが表示されたとき、startTime に設定された時間（例：10:02）が入力欄に表示されるべきです。

🔸実際の動作
モーダルが表示された際に、入力欄が空白のままになります。
ただし、手動で時間を選択すると、正しく更新され、イベントも発火します。

🔸コード例
<Datepicker
:model-value="startTime"
@update:model-value="(val) => startTime = val"
time-picker
time-only
format="HH:mm"
/>
🔸補足情報
format="HH:mm" を指定しても改善なし

問題は time-only モード時のみ発生

値の受け渡しはできており、描画だけが失敗している

🔸想定される原因
time-only モードでは内部的に { hours, minutes } のようなオブジェクト形式を期待しており、Date 型のままだと内部変換で意図しない挙動になっている可能性があります。

🔸環境情報
@vuepic/vue-datepicker: 11.0.2

Vue: 3.5.13

ブラウザ: Chrome 125+

🔸再現リンク（CodeSandbox）
👉 再現環境はこちらです

モーダルを開いて、時間入力欄が空白のままになることをご確認ください。
（startTime は正しい Date オブジェクトです）

[jp-ariyoshi]

Update & workaround found

After further investigation, I found that when using in time-only mode, the component expects the v-model or :model-value to be an object like { hours: number, minutes: number }, not a standard Date object.

This was not clearly documented and may cause confusion, especially because time-picker without time-only accepts Date just fine.

Working fix
In my component, I changed:

:model-value="startTime"
@update:model-value="val => startTime.value = val"
to:

v-model="startTimeObject" // startTimeObject = { hours, minutes }
and converted it manually back to Date before submitting.

Live reproduction
Here is a working demo with the fix:
https://codesandbox.io/p/devbox/5dyydp

Conclusion
I recommend updating the documentation to clarify the expected format in time-only mode, and ideally fallback gracefully if Date is passed (or at least warn the developer).

Thank you for the great library!

更新と回避策の発見

調査を進めた結果、 を time-only モードで使用する際、v-model または :model-value には通常の Date オブジェクトではなく、{ hours, minutes } の形式のオブジェクトが必要であることが判明しました。

この仕様はドキュメントでは明確にされておらず、特に time-picker 単独では Date を扱えるため混乱を招きやすいです。

修正方法

以下のコードを変更
変更前
:model-value="startTime"
@update:model-value="val => startTime.value = val"

変更後
v-model="startTimeObject" // startTimeObject = { hours, minutes }

submit 時に手動で Date に変換することで解決しました。

再現環境

修正済みの再現デモはこちらです：
https://codesandbox.io/p/devbox/5dyydp

まとめ

time-only モードで期待される値の形式について、ドキュメントで明記していただきたいです。また、Date オブジェクトが渡された場合に警告やフォールバックがあるとより親切です。