자바스크립트에서 날짜, 시간 정보를 갖고 있는 Date 객체를 비교하는 방법을 소개합니다. Date 객체가 갖고 있는 날짜 정보만 비교할 수 있고, 정확한 시간 정보까지 비교하여 누가 과거 시간이고 누가 미래 시간인지 크기를 비교할 수 있습니다.
1. 비교 연산자(>, >=, <, <=)로 날짜/시간 비교
비교 연산자로 두 개의 Date 객체의 크기를 비교할 수 있습니다. 어떤 Date 객체가 다른 객체보다 크다는 것은 시간상으로 앞에 있다는(미래) 의미입니다. 반대로 크기가 작다는 것은 시간상 과거라는 의미입니다.
const date1 = new Date('2022-05-04');
const date2 = new Date('2022-05-05');
console.log(date1 > date2);
console.log(date1 >= date2);
console.log(date1 < date2);
console.log(date1 <= date2);
Output:
false
false
true
true
문자열을 Date로 변환하는 방법은 JavaScript - 문자열을 날짜(Date)로 변환하는 방법를 참고해주세요.
주의할 점은 Date 객체는 ==
또는 ===
로 크기를 비교할 수 없습니다. 동등 연산자는 아래와 같이 항상 false를 리턴합니다.
const date1 = new Date('2022-05-05');
const date2 = new Date('2022-05-05');
console.log(date1 == date2);
console.log(date1 === date2);
Output:
false
false
2. Date.getTime()으로 날짜/시간 비교
Date.getTime()
는 UTC 시간을 millisecond로 리턴합니다. UTC는 1970/01/01
를 0초로 지금까지 흐른 시간을 표현한 것입니다.
millisecond이기 때문에 비교 연산자를 이용하여 크기를 비교할 수 있고, 또한 동등 연산자로 비교할 수도 있습니다.
const date1 = new Date('2022-05-04');
const date2 = new Date('2022-05-05');
console.log('date1: ' + date1.getTime());
console.log('date2: ' + date2.getTime());
console.log(date1.getTime() > date2.getTime());
console.log(date1.getTime() >= date2.getTime());
console.log(date1.getTime() < date2.getTime());
console.log(date1.getTime() <= date2.getTime());
console.log(date1.getTime() == date2.getTime());
Output:
date1: 1651622400000
date2: 1651708800000
false
false
true
true
false
3. 같은 날짜(년/월/일)인지 비교하기
Date는 날짜와 시간 정보를 모두 갖고 있습니다. 시간은 무시하고 날짜만 비교하고 싶을 때 날짜 정보만 가져와서 비교할 수 있습니다.
getFullYear()
, getMonth()
, getDate()
로 년/월/일 정보를 가져올 수 있습니다. 이 정보의 크기를 비교하시면 됩니다.
아래 예제는 시간은 비교하지 않고, 날짜만 같은지 비교하는 예제입니다.
const isSameDate = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear()
&& date1.getMonth() === date2.getMonth()
&& date1.getDate() === date2.getDate();
}
const date1 = new Date('2022-05-04 12:20:30');
const date2 = new Date('2022-05-04 15:30:40');
const date3 = new Date('2022-05-05 15:30:40');
console.log(isSameDate(date1, date2));
console.log(isSameDate(date2, date3));
Output:
true
false
4. 날짜/시간이 모두 동일한지 비교하기
날짜와 시간을 모두 비교할 때는 getTime()
으로 비교하시면 됩니다. getTime()
은 UTC의 millisecond이기 때문에 시간 정보도 모두 millisecond로 계산되어 포함되기 때문입니다.
아래 예제는 날짜와 시간이 같은지 비교하는 예제입니다.
const isSameDateAndTime = (date1, date2) => {
return date1.getTime() === date2.getTime();
}
const date1 = new Date('2022-05-04 12:20:30');
const date2 = new Date('2022-05-05 15:30:40');
const date3 = new Date('2022-05-05 15:30:40');
console.log(isSameDateAndTime(date1, date2));
console.log(isSameDateAndTime(date2, date3));
Output:
false
true
Related Posts
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수