new Date()
는 현재 날짜와 시간, 타임존을 출력해주며 new Date('2020-08-20')
과 같이 날짜를 넣으면 그 날짜를 기준으로 알려준다.
new Date('2020-08-02');
Sun Aug 02 2020 22:00:48 GMT+0900 (Korean Standard Time)
이를 이용해 D-Day를 계산할 수 있다.
new Date()
를 연산에 사용하면 날짜 및 시간을 milisecond으로 환산해서 나타내준다. 따라서 이를 일수로 변환할 필요가 있다./1000
second로 바꾸기 위해 나누기 1000* 60
분으로 바꾸기 위해 곱하기 60* 60
시간으로 바꾸기* 24
일로 바꾸기 new Date() / (1000 * 60 * 60 *24);
Math.floor()
함수를 사용해 반내림 해주면 쉽게 정수를 얻을 수 있다. Math.floor(new Date() / (1000 * 60 * 60 *24));
Math.floor(new Date() / (1000 * 60 * 60 *24)) + 1;
setHours()
new Date
는 현재 실행한 기준의 시간을 알려주기 때문에 시간에 따라 날짜 계산이 달라질 수 있다. setHours()
로 시간을 하나로 모두 고정해놓으면 이 문제를 쉽게 해결할 수 있다. Math.floor(new Date().setHours(9) / (1000 * 60 * 60 *24)) + 1;
data를 넘겨받아 계산을 해보았다. startdate는 일정의 시작을, enddate는 끝을 나타낸다.
startdateLeft
와 enddateLeft
에 각각 얼만큼 남았는지 넣어준다.
let startdateLeft = Math.floor((new Date(data.startdate).setHours(9) new Date().setHours(9)) / (1000 * 60 * 60 * 24)) + 1;
let enddateLeft = Math.floor((new Date(data.enddate).setHours(9) - new Date().setHours(9)) / (1000 * 60 * 60 * 24)) + 1;
status_content
가 디데이, 진행중, 마감을 표현한다 let status_content;
if (startdateLeft > 0) {
status_content = `D-${startdateLeft}`;
} else if (startdateLeft == 0) {
status_content = 'D-Day';
} else if (enddateLeft >= 0) {
status_content = '진행중';
} else {
status_content = '마감';
}
시작날짜와 마감날짜가 다른 경우에는 아래처럼 기간으로 표현하고자한다
시작날짜: 2020-07-20
마감날짜: 2020-08-05
기간: 7.20 ~ 8.05
하지만 둘이 같다면 기간이 아닌 날짜를 하나로 보여준다
시작날짜: 2020-07-20
마감날짜: 2020-07-20
기간: 7.20
let startdate = `${new Date(data.startdate).getMonth() + 1}.${new Date(data.startdate).getDate()}`;
let enddate = `${new Date(data.enddate).getMonth() + 1}.${new Date(data.enddate).getDate()}`;
let period;
if (startdate == enddate) {
period = startdate;
} else {
period = `${startdate} ~ ${enddate}`;
}
getMonth()
는 월을 0부터 센다. 따라서 7월 날짜의 getMonth()는 6으로 나와 1을 더해주어야한다문자열${변수}