html 24時間を超える時間の表示、入力

実現したいこと

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

jimbe

2023/05/17 04:24

タイトル、"表示"では無く"入力"のほうが良いのではないでしょうか。

manobi

2023/05/17 09:12

タイトルを修正しました。入力もそうですが、初期表示もできないので両方タイトルに記載させて頂きました。

shinoharat

2023/05/23 05:09 編集

「目覚ましが鳴るのは午前1時30分です」みたいな特定の時刻を「25:30」と表示したいのでしょうか？それとも、「目覚ましが鳴るまで、残り25時間30分です」みたいな時間の長さを表示したいのでしょうか？後者であれば、 `timespan` や `duration` などのワードでググれば、情報が見つかるかもしれません。以下のサイトで「html-duration-picker.js」「DurationPickerMaker」などのライブラリが紹介されていますので、もしかしたら要件に合うものがあるかもしれません。 https://www.jqueryscript.net/blog/best-duration-picker.html

manobi

2023/05/24 01:04

ご回答ありがとうございます。前者のように翌日の1:30を25:30のように表示したいと考えています。教えて頂いたサイト参考に探してみます。ありがとうございます。