二つのtimepickerの入力値から時間を算出したいです

Question

bootstrap3のtimepickerを使って勤怠記録の様なものを作っているのですが
timepickerの入力値から就労時間の割り出しが出来ないか色々やってみましたが行き詰ってしまいました。

	<input type="number" id="work_times" />
	<form id="jobsheet">
		<table>
			<tr>
				<th>作業内容</th><th>開始</th><th>終了</th>
			</tr>
			<tr class="works_row">
				<td>
					<input type="text" name="works">
				</td>
				<td>
					<input class=" time start input-small" type="text" readonly="readonly" />
				</td>
				<td>
					<input class=" time end input-small" type="text" readonly="readonly" />
				</td>
			</tr>
			<tr class="works_row">
				<td>
					<input type="text" name="works">
				</td>
				<td>
					<input class=" time start input-small" type="text" readonly="readonly" />
				</td>
				<td>
					<input class=" time end input-small" type="text" readonly="readonly" />
				</td>
			</tr>
			<tr class="works_row">
				<td>
					<input type="text" name="works">
				</td>
				<td>
					<input class=" time start input-small" type="text" readonly="readonly" />
				</td>
				<td>
					<input class=" time end input-small" type="text" readonly="readonly" />
				</td>
			</tr>
		</table>
	</form>

入力値はこのような文字列になります

この文字列から 各行の「開始」～「終了」までの時間を算出して
全ての行の合計を<input type="number" id="work_times" />に代入したいと思って。
一応こんなソースを書いては見たんですが全然ダメダメで.....

<script type="text/javascript" src="/js/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/bootstrap-timepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" >

	$('input.time').timepicker({
		defaultTime: '',
		showMeridian: false,
		minuteStep:10,
		showInputs: false,
		interval: 1
	});

		$(document).on('change','form#jobsheet', function(){
		var TotalHour = parseInt(0);
			$('tr.works_row').each(function(){
				start_input = $(this).find('input.start').val();
				end_input = $(this).find('input.end').val();
				if(start_input && end_input){
					var start_time = '2000/01/01 ' + start_input + ':00';
					var end_time = '2000/01/01 ' + end_input + ':00';
					var start = parseInt( Date.parse(start_time) );
					var end = parseInt( Date.parse(end_time) );
					var wh = (end - start)/3600000;
					TotalHour = (TotalHour + wh).toFixed(1);
				}
			});
			$('#work_times').val(work_hour);
		});
</script>

無い知恵を色々絞ってやってみましたが上手く行きません...(--;)

どなたかご指南よろしくお願いします m(_ _)m

Answer 1

3箇所で parseInt していますが、しなくてもどれももとから int です

動かしてないですが、問題点はたぶん次の2ヶ所です

1つめ
TotalHour = (TotalHour + wh).toFixed(1);

toFixed を使うと文字列になります
文字列に数値を足すと文字列結合されてしまい求めている結果になりません

2つめ
$('#work_times').val(work_hour);

work_hour というのは宣言されていないです
TotalHour の間違いだと思います

まとめると

// 前略
                    TotalHour = (TotalHour + wh).toFixed(1);
                }
            });
            $('#work_times').val(work_hour);

↓

// 前略
                    TotalHour += wh;
                }
            });
            $('#work_times').val(TotalHour.toFixed(1));

で良いかと思います

Comments

[退会済みユーザー]

ありがとうございます..♪
きちんと最後まで動きました^^