select 박스로 시간을 입력받아 시간의 차이 계산하기
본문
php파일로 제작하였고 대여 시작 시간과 대여 종료 시간을 입력받아 대여시간을 자동으로 구하려고 하는데 가능할까요?
답변 5
해당 페이지에서 바로 보여주려는 경우에는 javascript 로 처리해야 됩니다.
<tr>
<td> 대여 시작 시간 </td>
<td> 대여 종료 시간 </td>
<td> 대여 시간 </td>
</tr>
<tr>
<td>
<select name="StartTime" id="StartTime">
<option value="">시작 시간을 선택하세요</option>
<option value="1">2021-05-26 09:00:00</option>
<option value="2">2021-05-26 10:00:00</option>
<option value="3">2021-05-26 11:00:00</option>
<option value="4">2021-05-26 12:00:00</option>
<option value="5">2021-05-26 13:00:00</option>
</select>
</td>
<td>
<select name="EndTime" id="EndTime">
<option value="">종료 시간을 선택하세요</option>
<option value="1">2021-05-26 18:00:00</option>
<option value="2">2021-05-26 19:00:00</option>
<option value="3">2021-05-26 20:00:00</option>
<option value="4">2021-05-26 21:00:00</option>
<option value="5">2021-05-26 22:00:00</option>
</select>
</td>
<td>
<span id="s_hour"></span>
</td>
</tr>
<script>
$(function() {
$('#StartTime, #EndTime').on('change', function() {
var d1 = $('#StartTime').val();
var d2 = $('#EndTime').val();
if (date1 == '' || date2 == '')
return false;
var date1 = new Date(d1);
var date2 = new Date(d2);
var difference = Math.abs(date2.getTime() - date1.getTime());
var hourDifference = difference / 1000 / 3600;
$('#s_hour').html(hourDifference);
});
});
</script>
아하 감사합니다 ㅠㅠㅠ 혹시 13시에서 18시까지 빌렸으면 대여시간에 7이 나타나도록 하려면 var hourDifference = difference / 1000 / 3600 / 60; 으로 해야하나요??
대여시간에 7이 나타나도록 하려면 var hourDifference = difference / 1000 / 3600 이 맞습니다.
new Date() 부분을 조금 수정하였습니다. 2021-05-26 => 2021/05/26
<script>
$(function() {
$('#StartTime, #EndTime').on('change', function() {
var d1 = $('#StartTime').val();
var d2 = $('#EndTime').val();
if (date1 == '' || date2 == '')
return false;
var date1 = new Date(d1.replace(/-/g, '/'));
var date2 = new Date(d2.replace(/-/g, '/'));
var difference = Math.abs(date2.getTime() - date1.getTime());
var hourDifference = difference / 1000 / 3600;
$('#s_hour').html(hourDifference + '시간');
});
});
</script>
$time1 = strtotime($t_start);
$time2 = strtotime($t_end);
$diff = $time2 - $time1 / 3600;
echo $diff . '시간';
<tr>
<td> 대여 시작 시간 </td>
<td> 대여 종료 시간 </td>
<td> 대여 시간 </td>
</tr>
<td>
<select name="StartTime" id="StartTime">
<option value="">시작 시간을 선택하세요</option>
<option value="1">2021-05-26 09:00:00</option>
<option value="2">2021-05-26 10:00:00</option>
<option value="3">2021-05-26 11:00:00</option>
<option value="4">2021-05-26 12:00:00</option>
<option value="5">2021-05-26 13:00:00</option>
</select>
</td>
<td>
<select name="EndTime" id="EndTime">
<option value="">종료 시간을 선택하세요</option>
<option value="1">2021-05-26 18:00:00</option>
<option value="2">2021-05-26 19:00:00</option>
<option value="3">2021-05-26 20:00:00</option>
<option value="4">2021-05-26 21:00:00</option>
<option value="5">2021-05-26 22:00:00</option>
</select>
</td>
<td>
<?php
$datetime1 = strtotime('StartTime');
$datetime2 = strtotime('EndTime');
$diff=$datetime2- $datetime1 / 3600;
echo $diff
?>
</td>
혹시 이렇게 만들면 안되는건가요??
현재 이렇게 나타나고 있습니다 ㅜㅜ
var date1 = new Date(d1);
var date2 = new Date(d2);
->
var date1 = new Date(d1.replace(/-/g, '/'));
var date2 = new Date(d2.replace(/-/g, '/'));
지금 캡쳐본이 수정한 코드입니다. 계속 죄송합니다 ㅠㅠ
<tr>
<td> 대여 시작 시간 </td>
<td> 대여 종료 시간 </td>
<td> 대여 시간 </td>
</tr>
<tr>
<td>
<select name="StartTime" id="StartTime">
<option value="">시작 시간을 선택하세요</option>
<option value="1">2021-05-26 09:00:00</option>
<option value="2">2021-05-26 10:00:00</option>
<option value="3">2021-05-26 11:00:00</option>
<option value="4">2021-05-26 12:00:00</option>
<option value="5">2021-05-26 13:00:00</option>
</select>
</td>
<td>
<select name="EndTime" id="EndTime">
<option value="">종료 시간을 선택하세요</option>
<option value="1">2021-05-26 18:00:00</option>
<option value="2">2021-05-26 19:00:00</option>
<option value="3">2021-05-26 20:00:00</option>
<option value="4">2021-05-26 21:00:00</option>
<option value="5">2021-05-26 22:00:00</option>
</select>
</td>
<td>
<span id="s_hour"></span>
</td>
</tr>
<script>
$(function() {
$('#StartTime, #EndTime').on('change', function() {
var d1 = $('#StartTime option:checked').text();
var d2 = $('#EndTime option:checked').text();
if (d1 == '' || d2 == '')
return false;
var date1 = new Date(d1);
var date2 = new Date(d2);
var difference = Math.abs(date2.getTime() - date1.getTime());
var hourDifference = difference / 1000 / 3600;
$('#s_hour').html(hourDifference + '시간');
});
});
</script>
<tr>
<td> 대여 시작 시간 </td>
<td> 대여 종료 시간 </td>
<td> 대여 시간 </td>
</tr>
<tr>
<td>
<select name="StartTime" id="StartTime">
<option value="">시작 시간을 선택하세요</option>
<option value="1">2021-05-26 09:00:00</option>
<option value="2">2021-05-26 10:00:00</option>
<option value="3">2021-05-26 11:00:00</option>
<option value="4">2021-05-26 12:00:00</option>
<option value="5">2021-05-26 13:00:00</option>
</select>
</td>
<td>
<select name="EndTime" id="EndTime">
<option value="">종료 시간을 선택하세요</option>
<option value="1">2021-05-26 18:00:00</option>
<option value="2">2021-05-26 19:00:00</option>
<option value="3">2021-05-26 20:00:00</option>
<option value="4">2021-05-26 21:00:00</option>
<option value="5">2021-05-26 22:00:00</option>
</select>
</td>
<td>
<input name="s_hour" id="s_hour" style="border:0">
</td>
</tr>
<script>
$(function() {
$('#StartTime, #EndTime').on('change', function() {
var d1 = $('#StartTime option:checked').text();
var d2 = $('#EndTime option:checked').text();
if (d1 == '' || d2 == '')
return false;
var date1 = new Date(d1);
var date2 = new Date(d2);
var difference = Math.abs(date2.getTime() - date1.getTime());
var hourDifference = difference / 1000 / 3600;
$('#s_hour').val(hourDifference + '시간');
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
