質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,584

kadaj1613

score 18

前提・実現したいこと

テキストフォームに入力された時刻同士で稼動時間の計算をしたいです。
開始時間・終了時間・休憩時間の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]です。 
※他にも記述すべき情報がありましたら、ご指摘いただけますでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

されたいことが3つあるようです?

1.

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

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

2.

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

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

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

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

3.

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 15:03

    ご回答ありがとうございます。
    「時間として正しく解釈できる書式」ですが、以下内容でお願いします。

    ・数字と:(コロン)以外の文字は無いこと
    ・:(コロン)の前後に必ず入力があること
    ・前の数字の範囲は 0 ~ 23
    ・後ろの数字の範囲は 0 ~ 59
    ・全角入力も認める
    ・時間の逆転も認める
    (例えば、開始時間23:00、終了時間08:00、休憩時間01:00などでも認めます。
    ※日付の入力は無いのですが、上記入力でも稼働時間が08:00と出したいです。)

    以下内容のチェックは必要ないです。
    ・休憩時間が就業規則上の時間より長いかどうか
    ・開始時間-終了時間 ≦ 休憩時間 (全部休憩!?)

    宜しくお願いいたします。

    キャンセル

  • 2016/05/27 11:04

    何をすればよいかは見えてきたでしょうか
    あとはコードにしてみましょう
    うまくいかないところが出たら、別の質問でそのコードを投稿すれば具体的なアドバイスがもらえると思います

    キャンセル

0

入力部分ですが<select>を使用して時/分の2つの値を選択してもらう方式にしてしまえばテキスト入力での全角半角や「:」の処理を考えなくてもいいのではないかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 13:16

    ご回答ありがとうございます。
    すみません。
    その方法もあるかと思いますが、テキスト入力という方法は変えずに実現したいのです。

    キャンセル

0

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

([0-90-9]|[11][0-90-9]|[22][0-30-3])[::]([0-90-9]|[1-51-5][0-90-9])

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る