본문 바로가기

[javascript] 차주 날짜 계산하기

안자매 2022. 5. 23.
반응형


개인적으로 공부하면서 기록하는 공간으로

잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪​

날짜를 알고싶을 때, 이번주 O요일 말고도
다음주 O요일에 해당하는 날짜를 구하는 경우가 종종 있어요.

이번주 요일에 해당하는 날짜를 구하는 방법은 쉽게 찾아볼 수 있는데,
차주 요일에 해당하는 날짜를 구하는 방법은 찾아보기 힘들어 간단하게 정리해볼게요 !

 

차주 날짜 계산하는 방법

1) 기준이 되는 날짜 선언하기

let thisDate = new Date();
// Mon May 23 2022 14:54:29 GMT+0900 (한국 표준시)

새로운 날짜 객체를 선언하여 현재 날짜와 시간 정보를 thisDate 변수에 저장합한다.
오늘 날짜가 아닌 다른 특정날짜를 기준으로 하여 계산하고자 하는 경우에는 new Date('YYYY-MM-DD') 형태로 객체를 생성한다.


2) thisDate에 해당하는 요일 구하기

let day = thisDate.getDay();
// 2022년 5월 23일 월요일 → day = 1

getDay()는 앞서 저장한 날짜의 요일에 해당하는 정보를 정수 형태로 반환한다.

일요일 월요일 화요일 수요일 목요일 금요일 토요일
0 1 2 3 4 5 6


3) 다음주 월요일에 해당하는 날짜(일) 구하기

let calcDate = thisDate.getDate() - day + ((day == 0 ? 1 : 8) + 0); 
// 30

getDate()는 날짜의 일에 대한 정보를 정수(1~31) 형태로 반환한다.
1) 에서 저장한 날짜 2022년 5월 23일 월요일에서 this.getDate() = 23, day = 1 이므로 thisDate.getDate() - day = 22 (일요일)이 된다.
thisDate.getDate() - day를 하면 그 전 주의 일요일에 해당하는 일에 대한 정보를 반환하게 된다.
* 일주일의 시작은 월요일이라고 합니다.


다음주 월요일에 해당하는 날짜를 구하기 위해서는

일요일(day=0)인 경우 다음주 월요일에 해당하는 날이 바로 다음날이므로 +1을 해주고
일요일을 제외한 다른 요일(day=1~6)의 경우 +8을 해준다.
(thisDate.getDate() - day로 전 주 일요일의 날짜가 계산되었으므로 +8일을 해주어야 합니다.)

마지막 부분에 +0의 수식이 있는 이유는
차주 월요일을 구하는 경우 +0, 차주 화요일을 구하는 경우 +1, ··· 을 하기 위함이다.


4) 다음주 월요일 출력하기

let nextDate = new Date(thisDate.setDate(calcDate)).toISOString().substring(0, 10);
// 2022-05-30

setDate()는 현재 설정된 월의 시작부분을 기준으로 Date() 객체의 날짜를 설정한다.
setDate() 메서드를 이용하여 앞의 3)에서 구한 날짜를 설정해준다.

YYYY-MM-DD 포맷의 날짜를 출력하기 위해서 아래와 같이 포맷을 만들어 줄 수도 있지만

let nextDate = new Date(thisDate.setDate(calcDate));
let yyyy = nextDate.getFullYear();
let mm = nextDate.getMonth() + 1;
let dd = nextDate.getDate();

let fullNextDate = yyyy + '-' + mm + '-' + dd;
// 2022-05-30

toISOString() 메서드를 사용하게 되면 YYYY-MM-DDTHH:mm:ss.sssZ 포맷으로 출력하게되어 날짜 부분만 잘라서 간편하게 사용할 수 있다.

let nextDate = new Date(thisDate.setDate(calcDate)).toISOString();
// 2022-05-30T06:55:30.166Z

 

아래에서 날짜를 선택하면 날짜가 다음주 월요일에 대한 날짜가 출력되는 것을 확인할 수 있다.

 

 

Reference

https://devfunny.tistory.com/433?category=820780 

 

 

 

댓글