Q&A
タイトル、"表示"では無く"入力"のほうが良いのではないでしょうか。
実現したいこと
htmlでTimePickerのようなコントロールを使用して
24時間を超える時間の表示、入力を実現できたらと考えています。
前提
・javaのコントロールからthymeleafを使用して時間を設定。
時間はDBより取得し、表示する。
24時間を超える場合があり、その場合はそのまま「25:30」のように表示したい。
・できるだけ操作を簡単にしたいため、TimePickerのように直接入力ではなく、
上下ボタンで選択できるようなコントロールを使用したい。
発生している問題・エラーメッセージ
現状、input type="number"を使用するしかないのかなと思っていますが、
もし24時間以上の初期表示、入力が可能なコントロールがあったら教えてほしいです。
また、他にも比較的簡単に実現できる方法があれば教えてほしいです。
該当のソースコード
環境は以下です。
・java spring boot
・htmlの値の設定・取得はthymeleafを使用しています。
試したこと
以下の機能については試してみましたが、表示、入力できる時間は23:59まででした。
・htmlのinput type="time"
・jquery timepicker
・jquery timeEntry (オプションによって24時間以上の入力はできるが、初期表示できない)
補足情報（FW/ツールのバージョンなど）
html : HTML5
java : 17
タイトルを修正しました。
入力もそうですが、初期表示もできないので両方タイトルに記載させて頂きました。
「目覚ましが鳴るのは午前1時30分です」みたいな特定の時刻を「25:30」と表示したいのでしょうか？
それとも、「目覚ましが鳴るまで、残り25時間30分です」みたいな時間の長さを表示したいのでしょうか？
後者であれば、 `timespan` や `duration` などのワードでググれば、情報が見つかるかもしれません。
以下のサイトで「html-duration-picker.js」「DurationPickerMaker」などのライブラリが紹介されていますので、もしかしたら要件に合うものがあるかもしれません。
https://www.jqueryscript.net/blog/best-duration-picker.html
ご回答ありがとうございます。
前者のように翌日の1:30を25:30のように表示したいと考えています。
教えて頂いたサイト参考に探してみます。ありがとうございます。
回答1件
0
ベストアンサー
html-duration-picker が良いかと思います。
時分のみ（秒を非表示）にしたい場合は「data-hide-seconds」オプションが使えます。
投稿2023/05/23 05:40
編集2023/05/23 06:23総合スコア1592
回答へのコメント
まさに探していたものでした！
ありがとうございました。
あなたの回答
tips
プレビュー
