テキストフォームに入力された時間同士の計算の仕方

###前提・実現したいこと
テキストフォームに入力された時刻同士で稼動時間の計算をしたいです。
開始時間・終了時間・休憩時間の3つのテキストフォームがあります。
計算式は開始時間が12：00、終了時間が16：00、休憩時間が00：30と入力された場合
16：00 - 12：00 - 00：30と計算し、稼働時間が03：30になるように求めます。

入力される内容が全角or半角で
hh:mm
と入力(時間と分)され、3つのテキストフォーム全てが入力された場合のみ計算させたいです。

例えば休憩時間を入力した段階で、開始と終了時間が入力されていたら、テキストフォームから
フォーカスが外れた時に計算させたいです。

計算後の処理もありますが、そこは自身でどうすれば良いかわかるので計算させる方法を教えていただきたいです。

###試したこと
jQUeryに入力文字を判定する関数を定義したり、文字列の中から「：」を削除して引き算をさせてみたり、他には、そもそも入力を全角or半角で「hh:mm」以外を受け付けないようにするなど色々考えましたが、どの方法も正しく動作しないです。
どうしたらいいかまったくわからない状態です。

###補足情報(言語/FW/ツール等のバージョンなど)
[CakePHP 2.4.10]
[jQuery 2.1]です。
※他にも記述すべき情報がありましたら、ご指摘いただけますでしょうか?

行動規範の内容に同意します

回答4件

日付フォーマットなど日付系処理
どうぞ

投稿2016/05/25 03:53

退会済みユーザー

総合スコア0

正規表現は使えますか？
以下で全角半角に対応して24時間制時刻表示にマッチします。
match() の戻り値が null であれば、時刻でない、時刻であれば時間、分をそれぞれ格納した配列が戻ります。

([0-9０-９]|[1１][0-9０-９]|[2２][0-3０-３]):：

投稿2016/06/22 02:42

Zuishin

総合スコア28660

ベストアンサー

されたいことが３つあるようです？

１．

稼動時間の計算をしたいです。

時間数の計算は、通算秒または通算分にしてしまうのが楽だと思います
「開始時間が12：00、終了時間が16：00、休憩時間が00：30」
通算分で考えれば (1660) - (1260) - 30 = 210 分
210 / 60 = 3 時間
210 % 60 = 30 分
という感じ

２．

全てが入力された場合のみ計算させたいです。

・<input>の中身が全て埋まっている（lengthが0ではない）
・時間として正しく解釈できる書式で入力されている
以上を満たしていれば１．の計算を行います

「時間として正しく解釈できる書式」をどう考えるかですが、例として
・数字と:（コロン）以外の文字は無いこと
・:（コロン）の前後に必ず入力があること
・前の数字の範囲は 0 ～ 23
・後ろの数字の範囲は 0 ～ 59
などなど

また
・全角入力も認める
・時間の逆転は認めない
といったルール決めと対処
・休憩時間が就業規則上の時間より長いかどうか
・開始時間－終了時間 ≦ 休憩時間（全部休憩！？）
といったチェックも必要そうでしょうか

３．

フォーカスが外れた時に計算させたいです。

onblurを使うことで「フォーカスが外れたときに処理実行」が実現できます
たとえば
<input type="text" onblur="doCalc()">
としておけば、入力ボックスからフォーカスが離れたときにdoCalc関数が呼び出されます

jQueryで書くなら
$("input").blur( function () { 処理 } );
という方法も

投稿2016/05/25 05:51

takito

総合スコア3111

kadaj1613

2016/05/25 06:03

ご回答ありがとうございます。「時間として正しく解釈できる書式」ですが、以下内容でお願いします。・数字と:（コロン）以外の文字は無いこと・:（コロン）の前後に必ず入力があること・前の数字の範囲は 0 ～ 23 ・後ろの数字の範囲は 0 ～ 59 ・全角入力も認める・時間の逆転も認める (例えば、開始時間23：00、終了時間08：00、休憩時間01：00などでも認めます。 ※日付の入力は無いのですが、上記入力でも稼働時間が08：00と出したいです。) 以下内容のチェックは必要ないです。・休憩時間が就業規則上の時間より長いかどうか・開始時間－終了時間 ≦ 休憩時間（全部休憩！？）宜しくお願いいたします。