Programming language/Javascript,jQuery

[Javascript]날짜 비교

자바스크립트를 사용해 두 날짜의 차이를 비교하기

아래 예제는 문자열로 된 값을 날짜 타입으로 변경해서 두 값을 비교하는 방법이다.

문자열을 날짜 타입으로 변경하는 이유는 각각의 월마다 말일이 다르기 때문이다.

"2018.02.25 ~ 2018.03.05"를 비교할 때, 2월은 28일까지밖에 없으니 날짜로 비교하는 것이 정확하다.

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
31
32
33
34
35
36
37
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/common/resource.jsp" %>
 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function calculus(){    
    var sta_ymd = document.getElementById("STA_YMD").value;        
    var sta_ymd_arr = sta_ymd.split(".");
    
    var end_ymd = document.getElementById("END_YMD").value;    
    var end_ymd_arr = end_ymd.split(".");
        
    
    var sta_ymd_obj = new Date(sta_ymd_arr[0], Number(sta_ymd_arr[1])-1, sta_ymd_arr[2]);
    var end_ymd_obj = new Date(end_ymd_arr[0], Number(end_ymd_arr[1])-1, end_ymd_arr[2]);
    
    var betweenDay = (end_ymd_obj.getTime() - sta_ymd_obj.getTime())/1000/60/60/24;
    
    document.getElementById("DT_RESULT").value = betweenDay;
}
</script>
 
</head>
<body>
<form>
시작일 : <input type="text" id="STA_YMD" name="STA_YMD" value="2019.02.25">
종료일 : <input type="text" id="END_YMD" name="END_YMD" value="2019.03.05">
차이 : <input type="text" id="DT_RESULT" name="DT_RESULT" value="">
<input type="button" value="비교" onclick="calculus()">
</form>
</body>
</html>
Colored by Color Scripter
cs

var sta_ymd_arr = sta_ymd.split("."); : split 함수를 이용해서 "."을 구분해 배열로 각각 리턴했다.

var sta_ymd_obj = new Date(sta_ymd_arr[0], Number(sta_ymd_arr[1])-1, sta_ymd_arr[2]);

: 13, 16라인에서 생성된 배열로 Date 함수를 만들어 날짜 생성자를 만든다.

var betweenDay = (end_ymd_obj.getTime() - sta_ymd_obj.getTime())/1000/60/60/24;

: getTime() 메소드로 두 날짜의 차이를 구한다. getTime() 메소드는 시간을 밀리세컨드 단위로 변환하기 때문에 1000으로 나누고, 다시 60초로 나누면 초(sec)가 되고 다시 60으로 나누면 시간(hour)이 되고 다시 24로 나누면 일(day)이 된다.

+피드백은 언제나 환영입니다 :)

저작자표시 비영리 변경금지

'Programming language > Javascript,jQuery' 카테고리의 다른 글

[jQuery]form 초기화 (0)	2020.04.24
[jQuery UI]드래그 기능 (0)	2019.12.03
[Javascript]문자열 날짜로 변환 (0)	2019.03.22
[Javascript]현재 날짜 구하기 (0)	2019.02.01
[jQuery]체크박스 체크하기 (0)	2018.11.27

Contents

새소식

[Javascript]날짜 비교

'Programming language > Javascript,jQuery' 카테고리의 다른 글

연관 포스팅

티스토리툴바