2016年9月8日 – 幸谷研究室＠静岡理工科大学

　長時間にわたるベンチマークテストの開始日時と終了日時の差を導出する必要に迫られたので，PHPとJavaScriptでそれぞれ実装してみました。

http://cs-tklab.na-inet.jp/~tkouya/diff_dates.php

　参考にしたのは，Qiitaのこちら(JavaScript)とこちら(PHP)です。

　ところで，PHPとJavaScriptとで差が出ることがあるんですが，この辺の理屈がよく分かっていません。

　西暦のみ変えて，同一日時で計算すると2日分だけ計算値がズレます。どっちが正しいのかしらん？　理屈が分かる方，お知らせ下さい。ソースコードは以下に上げておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>Derive the difference of two dates</title>
	<script type="text/javascript">
		// 現在時刻の取得
		var now_fulldate = new Date();
		var now_year = now_fulldate.getFullYear();
		var now_month = now_fulldate.getMonth() + 1;
		var now_date = now_fulldate.getDate();
		var now_hour = now_fulldate.getHours();
		var now_minute = now_fulldate.getMinutes();
		var now_second = now_fulldate.getSeconds();
	</script>
</head>
<body>
<h1>日付の差の計算</h1>
<h2>Last Update: 2016-09-08(Thu)</h2>
<hr />
<!-- 2つのフォーム -->
<p>
<!-- PHP版 -->
<div style="border: solid; float: left; width: 45%; padding: 10px;">
<h2>PHP版</h2>
	<form id="php_form" method="POST">
	<h3>日付・時刻1: Date1</h3>
		<p>
			西暦年1   : <input type="text" size="6" id="year1" name="year1" /><br />
			月1(1～12): <input type="text" size="3" id="month1" name="month1" /><br />
			日1(1～31): <input type="text" size="3" id="date1" name="date1" /><br />
			時1(0～23): <input type="text" size="3" id="hour1" name="hour1" /><br />
			分1(0～59): <input type="text" size="3" id="minute1" name="minute1" /><br />
			秒1(0～59): <input type="text" size="3" id="second1" name="second1" /><br />
		</p>
	<h3>日付・時刻2: Date2</h3>
		<p>
			西暦年2   : <input type="text" size="6" id="year2" name="year2" /><br />
			月2(1～12): <input type="text" size="3" id="month2" name="month2" /><br />
			日2(1～31): <input type="text" size="3" id="date2" name="date2" /><br />
			時2(0～23): <input type="text" size="3" id="hour2" name="hour2" /><br />
			分2(0～59): <input type="text" size="3" id="minute2" name="minute2" /><br />
			秒2(0～59): <input type="text" size="3" id="second2" name="second2" /><br />
		</p>
		<p><input type="submit" value="入力完了" /> <input type="reset" value="消去" /></p>
		<script type="text/javascript">
			document.getElementById('year1').value = now_year;
			document.getElementById('month1').value = now_month;
			document.getElementById('date1').value = now_date;
			document.getElementById('hour1').value = now_hour;
			document.getElementById('minute1').value = now_minute;
			document.getElementById('second1').value = now_second;

			document.getElementById('year2').value = now_year;
			document.getElementById('month2').value = now_month;
			document.getElementById('date2').value = now_date;
			document.getElementById('hour2').value = now_hour;
			document.getElementById('minute2').value = now_minute;
			document.getElementById('second2').value = now_second;
		</script>
	</form>
	<?php 
		if(!empty($_POST['year1']) && !empty($_POST['month1']) && !empty($_POST['date1']) && !empty($_POST['hour1']) && !empty($_POST['minute1']) && !empty($_POST['second1']) && !empty($_POST['year2']) && !empty($_POST['month2']) && !empty($_POST['date2']) && !empty($_POST['hour2']) && !empty($_POST['minute2']) && !empty($_POST['second2']))
		{
			$date1 = new DateTime( htmlspecialchars($_POST['year1']) . '-' . htmlspecialchars($_POST['month1']) . '-' . htmlspecialchars($_POST['date1']) . ' ' . htmlspecialchars($_POST['hour1']) . ':' . htmlspecialchars($_POST['minute1']) . ':' . htmlspecialchars($_POST['second1']) );
			$date2 = new DateTime( htmlspecialchars($_POST['year2']) . '-' . htmlspecialchars($_POST['month2']) . '-' . htmlspecialchars($_POST['date2']) . ' ' . htmlspecialchars($_POST['hour2']) . ':' . htmlspecialchars($_POST['minute2']) . ':' . htmlspecialchars($_POST['second2']) );
			if(!empty($date1) && !empty($date2))
			{
		?>
			<h3>出力</h3>
			<p>
		<?php
				echo 'Date1: ' . $date1->format('Y-m-d H:i:s') . "<br />\n";
				echo 'Date2: ' . $date2->format('Y-m-d H:i:s') . "<br />\n";
				$diff = $date2->diff($date1);
				echo 'Date1 - Date2: ' . $diff->format('%R %y-%m-%d %h:%i:%s') . "<br />\n";
		?>
			</p>
	<?php
			}
	}
	?>
</div>

<!-- JavaScript版 -->
<div style="border: solid; float: left; width: 45%; padding: 10px;">
<h2>JavaScript版</h2>
	<form id="js_form" method="POST">
	<h3>日付・時刻1: Date1</h3>
		<p>
			西暦年1   : <input type="text" size="6" id="js_year1" name="js_year1" /><br />
			月1(1～12): <input type="text" size="3" id="js_month1" name="js_month1" /><br />
			日1(1～31): <input type="text" size="3" id="js_date1" name="js_date1" /><br />
			時1(0～23): <input type="text" size="3" id="js_hour1" name="js_hour1" /><br />
			分1(0～59): <input type="text" size="3" id="js_minute1" name="js_minute1" /><br />
			秒1(0～59): <input type="text" size="3" id="js_second1" name="js_second1" /><br />
		</p>
	<h3>日付・時刻2: Date2</h3>
		<p>
			西暦年2   : <input type="text" size="6" id="js_year2" name="js_year2" /><br />
			月2(1～12): <input type="text" size="3" id="js_month2" name="js_month2" /><br />
			日2(1～31): <input type="text" size="3" id="js_date2" name="js_date2" /><br />
			時2(0～23): <input type="text" size="3" id="js_hour2" name="js_hour2" /><br />
			分2(0～59): <input type="text" size="3" id="js_minute2" name="js_minute2" /><br />
			秒2(0～59): <input type="text" size="3" id="js_second2" name="js_second2" /><br />
		</p>
		<p><input type="button" value="入力完了" onclick="output()" /> <input type="reset" value="消去" /></p>
		<script type="text/javascript">
			document.getElementById('js_year1').value = now_year;
			document.getElementById('js_month1').value = now_month;
			document.getElementById('js_date1').value = now_date;
			document.getElementById('js_hour1').value = now_hour;
			document.getElementById('js_minute1').value = now_minute;
			document.getElementById('js_second1').value = now_second;

			document.getElementById('js_year2').value = now_year;
			document.getElementById('js_month2').value = now_month;
			document.getElementById('js_date2').value = now_date;
			document.getElementById('js_hour2').value = now_hour;
			document.getElementById('js_minute2').value = now_minute;
			document.getElementById('js_second2').value = now_second;
		</script>
	</form>
	<p id="js_output_area"></p>
	<script type="text/javascript">
			function output() {
				var date1 = new Date( document.getElementById('js_year1').value + '-' + document.getElementById('js_month1').value + '-' + document.getElementById('js_date1').value + ' ' + document.getElementById('js_hour1').value + ':' + document.getElementById('js_minute1').value + ':' + document.getElementById('js_second1').value );
				var date2 = new Date( document.getElementById('js_year2').value + '-' + document.getElementById('js_month2').value + '-' + document.getElementById('js_date2').value + ' ' + document.getElementById('js_hour2').value + ':' + document.getElementById('js_minute2').value + ':' + document.getElementById('js_second2').value );
				var diff = new Date(date1 - date2);

				document.getElementById('js_output_area').innerHTML  = '<h3>出力</h3>\n';
				document.getElementById('js_output_area').innerHTML +=  'Date1: ' + date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds() + '<br />\n';
				document.getElementById('js_output_area').innerHTML +=  'Date2: ' + date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds() + '<br />\n';
				document.getElementById('js_output_area').innerHTML +=  'Date1 - Date2: ' + (diff.getUTCFullYear() - 1970) + '-' + diff.getUTCMonth() + '-' + (diff.getDate() - 1) + ' ' + diff.getUTCHours() + ':' + diff.getUTCMinutes() + ':' + diff.getUTCSeconds() + '<br />\n';
			
			}
	</script>
</div>
</p>
<!-- floatクリア -->
<p style="clear: both;">
<h2>参考 URL</h2>
	<ul>
		<li><a href="http://qiita.com/re-24/items/c3ed814f2e1ee0f8e811#%E6%97%A5%E4%BB%98%E3%81%AE%E5%B7%AE%E3%82%92%E8%A8%88%E7%AE%97">Qiita: DataTimeクラスのまとめメモ</a></li>
		<li><a href="http://qiita.com/kazu56/items/cca24cfdca4553269cab">Qiita: 【Javascript】日付処理</a></li>
	</ul>
</p>
<hr />
<address>Tomonori Kouya : Copyright (c) 2016 All rights reserved.</address>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!DOCTYPE html>

<head>

<title>Derive the difference of two dates</title>

// 現在時刻の取得

var now_fulldate = new Date();

var now_year = now_fulldate.getFullYear();

var now_month = now_fulldate.getMonth() + 1;

var now_date = now_fulldate.getDate();

var now_hour = now_fulldate.getHours();

var now_minute = now_fulldate.getMinutes();

var now_second = now_fulldate.getSeconds();

</script>

</head>

<body>

<h1>日付の差の計算</h1>

<h2>Last Update: 2016-09-08(Thu)</h2>

<hr />

<p>

<p>

西暦年1 : <input type="text" size="6" id="year1" name="year1" /><br />

月1(1～12): <input type="text" size="3" id="month1" name="month1" /><br />

日1(1～31): <input type="text" size="3" id="date1" name="date1" /><br />

時1(0～23): <input type="text" size="3" id="hour1" name="hour1" /><br />

分1(0～59): <input type="text" size="3" id="minute1" name="minute1" /><br />

秒1(0～59): <input type="text" size="3" id="second1" name="second1" /><br />

</p>

<p>

西暦年2 : <input type="text" size="6" id="year2" name="year2" /><br />

月2(1～12): <input type="text" size="3" id="month2" name="month2" /><br />

日2(1～31): <input type="text" size="3" id="date2" name="date2" /><br />

時2(0～23): <input type="text" size="3" id="hour2" name="hour2" /><br />

分2(0～59): <input type="text" size="3" id="minute2" name="minute2" /><br />

秒2(0～59): <input type="text" size="3" id="second2" name="second2" /><br />

</p>

document.getElementById('year1').value = now_year;

document.getElementById('month1').value = now_month;

document.getElementById('date1').value = now_date;

document.getElementById('hour1').value = now_hour;

document.getElementById('minute1').value = now_minute;

document.getElementById('second1').value = now_second;

document.getElementById('year2').value = now_year;

document.getElementById('month2').value = now_month;

document.getElementById('date2').value = now_date;

document.getElementById('hour2').value = now_hour;

document.getElementById('minute2').value = now_minute;

document.getElementById('second2').value = now_second;

</script>

</form>

<?php

if(!empty($_POST['year1']) && !empty($_POST['month1']) && !empty($_POST['date1']) && !empty($_POST['hour1']) && !empty($_POST['minute1']) && !empty($_POST['second1']) && !empty($_POST['year2']) && !empty($_POST['month2']) && !empty($_POST['date2']) && !empty($_POST['hour2']) && !empty($_POST['minute2']) && !empty($_POST['second2']))

{

$date1 = new DateTime( htmlspecialchars($_POST['year1']) . '-' . htmlspecialchars($_POST['month1']) . '-' . htmlspecialchars($_POST['date1']) . ' ' . htmlspecialchars($_POST['hour1']) . ':' . htmlspecialchars($_POST['minute1']) . ':' . htmlspecialchars($_POST['second1']) );

$date2 = new DateTime( htmlspecialchars($_POST['year2']) . '-' . htmlspecialchars($_POST['month2']) . '-' . htmlspecialchars($_POST['date2']) . ' ' . htmlspecialchars($_POST['hour2']) . ':' . htmlspecialchars($_POST['minute2']) . ':' . htmlspecialchars($_POST['second2']) );

if(!empty($date1) && !empty($date2))

{

<p>

<?php

echo 'Date1: ' . $date1->format('Y-m-d H:i:s') . "<br />\n";

echo 'Date2: ' . $date2->format('Y-m-d H:i:s') . "<br />\n";

$diff = $date2->diff($date1);

echo 'Date1 - Date2: ' . $diff->format('%R %y-%m-%d %h:%i:%s') . "<br />\n";

</p>

<?php

}

</div>

<h2>JavaScript版</h2>

<p>

西暦年1 : <input type="text" size="6" id="js_year1" name="js_year1" /><br />

月1(1～12): <input type="text" size="3" id="js_month1" name="js_month1" /><br />

日1(1～31): <input type="text" size="3" id="js_date1" name="js_date1" /><br />

時1(0～23): <input type="text" size="3" id="js_hour1" name="js_hour1" /><br />

分1(0～59): <input type="text" size="3" id="js_minute1" name="js_minute1" /><br />

秒1(0～59): <input type="text" size="3" id="js_second1" name="js_second1" /><br />

</p>

<p>

西暦年2 : <input type="text" size="6" id="js_year2" name="js_year2" /><br />

月2(1～12): <input type="text" size="3" id="js_month2" name="js_month2" /><br />

日2(1～31): <input type="text" size="3" id="js_date2" name="js_date2" /><br />

時2(0～23): <input type="text" size="3" id="js_hour2" name="js_hour2" /><br />

分2(0～59): <input type="text" size="3" id="js_minute2" name="js_minute2" /><br />

秒2(0～59): <input type="text" size="3" id="js_second2" name="js_second2" /><br />

</p>

document.getElementById('js_year1').value = now_year;

document.getElementById('js_month1').value = now_month;

document.getElementById('js_date1').value = now_date;

document.getElementById('js_hour1').value = now_hour;

document.getElementById('js_minute1').value = now_minute;

document.getElementById('js_second1').value = now_second;

document.getElementById('js_year2').value = now_year;

document.getElementById('js_month2').value = now_month;

document.getElementById('js_date2').value = now_date;

document.getElementById('js_hour2').value = now_hour;

document.getElementById('js_minute2').value = now_minute;

document.getElementById('js_second2').value = now_second;

</script>

</form>

function output() {

var date1 = new Date( document.getElementById('js_year1').value + '-' + document.getElementById('js_month1').value + '-' + document.getElementById('js_date1').value + ' ' + document.getElementById('js_hour1').value + ':' + document.getElementById('js_minute1').value + ':' + document.getElementById('js_second1').value );

var date2 = new Date( document.getElementById('js_year2').value + '-' + document.getElementById('js_month2').value + '-' + document.getElementById('js_date2').value + ' ' + document.getElementById('js_hour2').value + ':' + document.getElementById('js_minute2').value + ':' + document.getElementById('js_second2').value );

var diff = new Date(date1 - date2);

document.getElementById('js_output_area').innerHTML = '<h3>出力</h3>\n';

document.getElementById('js_output_area').innerHTML += 'Date1: ' + date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds() + '<br />\n';

document.getElementById('js_output_area').innerHTML += 'Date2: ' + date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds() + '<br />\n';

document.getElementById('js_output_area').innerHTML += 'Date1 - Date2: ' + (diff.getUTCFullYear() - 1970) + '-' + diff.getUTCMonth() + '-' + (diff.getDate() - 1) + ' ' + diff.getUTCHours() + ':' + diff.getUTCMinutes() + ':' + diff.getUTCSeconds() + '<br />\n';

}

</script>

</div>

</p>

<ul>

<li><a href="http://qiita.com/re-24/items/c3ed814f2e1ee0f8e811#%E6%97%A5%E4%BB%98%E3%81%AE%E5%B7%AE%E3%82%92%E8%A8%88%E7%AE%97">Qiita: DataTimeクラスのまとめメモ</a></li>

<li><a href="http://qiita.com/kazu56/items/cca24cfdca4553269cab">Qiita: 【Javascript】日付処理</a></li>

</ul>

</p>

<hr />

</body>

</html>

日: 2016年9月8日

[卒研メモ] PHPとJavaScriptによる日付差の計算

2016年9月
日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

共有: