날짜 형식 바꿔서 두개의 날짜 사이의 일수를 구하기

먼저 완성한 코드를 올리고, 밑에 세부로 나누어서 설명해보려 한다.
내가 해야 할 일은 기존에 쓰던 날짜에 오늘날짜를 빼서 값이 10 이상이면 줄의 색이 바뀌는 일을 하였다.
간단히 말하자면, (오늘날짜 - 반납일자 >= 10) 이면 grid의 줄색상 바꾸기.

---

trStyleClass: function(){
console.log("@@@@@@@@@@@@반납일자 : "+ this.item.DAY1); //@@@@@@@@@@@@반납일자 : 20210325
//DAY1는 yyyymmdd 형식으로 DB에 저장됨
/*오늘 날짜*/
var date = new Date();
var year = date.getFullYear();
var month = new String(date.getMonth()+1);
var day = new String(date.getDate());
/*month와 day가 한자리 수일때 0 채워주기*/
if(month.length == 1){
month = "0"+month;
}
if(day.length == 1){
day = "0"+day;
}
var today_date = (year+"-"+month+"-"+day);
console.log(">>>>>>>>>>>>>>>>>오늘 : "+today_date); //>>>>>>>>>>>>>>>>>오늘 : 2021-06-07

/*반납일자 형식 yyyymmdd에서 yyyy-mm-dd 바꾸기*/
var ds = this.item.DAY1;
var start_String = ds.substr(0,4)+"-"+ds.substr(4,2)+"-"+ds.substr(6,2);
console.log(">>>>>>>>>>>>>>>>>>반납일자 yyyy-mm-dd : "+start_String); //>>>>>>>>>>>>>>>>>>반납일자 yyyy-mm-dd : 2021-03-25
/*"-" 기준으로 날짜 분리*/
var start_Array = start_String.split("-"); //반납일자 쪼개기
jsvar end_Array = today_date.split("-"); //오늘날짜 쪼개기

var start_date = new Date(start_Array[0], Number(start_Array[1])-1, start_Array[2]);
var end_date = new Date(end_Array[0], Number(end_Array[1])-1, end_Array[2]);
var between_day = Math.ceil(((today_date.getTime()) - (this.item.DAY1.getTime()))/(10000*3600*24));

console.log("@@@@@@@@@@@@@@@@ start_date : "+start_date); //@@@@@@@@@@@@@@@@ start_date : Thu Mar 25 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log("@@@@@@@@@@@@@@@@ end_date : "+end_date); //@@@@@@@@@@@@@@@@ end_date : Mon Jun 07 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log("@@@@@@@@@@@@@@@@ 오늘 - 반납일자 between_day : "+between_day); //@@@@@@@@@@@@@@@@ 오늘 - 반납일자 between_day : 74

return (between_day >= 10) ? "grid-row-24" : ""; //(오늘날짜 - 반납일자 >= 10) 색상 지정
},

---

느낀점 >>>
점심식사 후에 안쉬고 이것만 내리 붙잡고 있었다. 처음에 yyyymmdd로 하였을때는 자꾸 반납날짜랑 오늘날짜 사이의 뺄셈이 NaN로 나오고 수정해봤더니 각 날짜들이 invalid data 라고 나오고 난리 법석이었다.
인터넷을 찾아보니까 다들 '-'문자를 기준으로 날짜를 자르길래 그거 안따라 하고 해보려다가 결국은 따라서 하게 되었다.
이 코드에서 나름대로 핵심은
오늘 날짜 만들기
yyyymmdd를 yyyy-mm-dd로 만들기
이다. 암튼 성공적으로 결과가 나왔고, 엄청난 성취감을 느꼈다.오후 업무 시간을 다 쏟아 부어서 이거 하나 했지만, 성공 당시의 기쁨이 굉장히 좋았다.

그럼 해설 시작>>
(1)
먼저 날짜 형식이 어떤지 확인을 하였다. 나는 DAY1의 날짜가 필요하니까
console.log("@@@@@@@@@@@@반납일자 : "+ this.item.DAY1); //@@@@@@@@@@@@반납일자 : 20210325
DAY1은 yyyymmdd 형식으로 DB에 저장되있었고, 20210325 로 확인된다.

---

(2)
오늘 날짜는 내가 필요한만큼만 만들어야 한다. 나는 yyyy-mm-dd가 필요로 하니까, 년월일 선언해서 가져오고, 월과 일이 한자리 수일경우 0을 추가해서 기존에 가지고 있던 날짜과 맞추어 준다.
/*오늘 날짜*/
var date = new Date();
var year = date.getFullYear();
var month = new String(date.getMonth()+1);
var day = new String(date.getDate());
/*month와 day가 한자리 수일때 0 채워주기*/
if(month.length == 1){
month = "0"+month;
}
if(day.length == 1){
day = "0"+day;
}
/*yyyy-mm-dd 형식으로 만들주기*/
var today_date = (year+"-"+month+"-"+day);
console.log(">>>>>>>>>>>>>>>>>오늘 : "+today_date); //>>>>>>>>>>>>>>>>>오늘 : 2021-06-07
오늘 날짜가 원하는 대로 잘 만들어진 것을 확인 할 수 있다.

---

(3)
/*반납일자 형식 yyyymmdd에서 yyyy-mm-dd 바꾸기*/
var ds = this.item.DAY1;
var start_String = ds.substr(0,4)+"-"+ds.substr(4,2)+"-"+ds.substr(6,2);
console.log(">>>>>>>>>>>>>>>>>>반납일자 yyyy-mm-dd : "+start_String); //>>>>>>>>>>>>>>>>>>반납일자 yyyy-mm-dd : 2021-03-25
기존에 가지고 있던 반납일자형식이 yyyymmdd에서 yyyy-mm-dd로 바꾸어 주었다.
처음에는 2번 오늘날짜를 yyyymmdd형식으로 만든 후에 사용하려고 했는데 인터넷 보면서 나름대로 해봤지만 잘 안되서, 그냥 인터넷에 나와있는데로 yyyymmdd를 yyyy-mm-dd 형식으로 만든 후에 자르기를 선택했다.

---

(4)
/*"-" 기준으로 날짜 분리*/
var start_Array = start_String.split("-"); //반납일자 쪼개기
var end_Array = today_date.split("-"); //오늘날짜 쪼개기
반납일자와 오늘날짜 둘 다 yyyy-mm-dd형식이기 때문에 - 문자 기준으로 자르도록 하였다.

---

(5)
var start_date = new Date(start_Array[0], Number(start_Array[1])-1, start_Array[2]);
var end_date = new Date(end_Array[0], Number(end_Array[1])-1, end_Array[2]);
var between_day = Math.ceil(((today_date.getTime()) - (this.item.DAY1.getTime()))/(10000*3600*24));

console.log("@@@@@@@@@@@@@@@@ start_date : "+start_date); //@@@@@@@@@@@@@@@@ start_date : Thu Mar 25 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log("@@@@@@@@@@@@@@@@ end_date : "+end_date); //@@@@@@@@@@@@@@@@ end_date : Mon Jun 07 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log("@@@@@@@@@@@@@@@@ 오늘 - 반납일자 between_day : "+between_day); //@@@@@@@@@@@@@@@@ 오늘 - 반납일자 between_day : 74

start_date 안에는 반납일자를 쪼갠것을 배열에 넣고,
end_date 안에는 오늘날짜 쪼갠것을 넣었다.
그리고 between_day는 두 개 날짜 사이의 일을(빼기) 구하였다.
console.log를 사용하여 각 데이터를 확인할 수 있다.

---

(6)
return (between_day >= 10) ? "grid-row-red" : ""; //(오늘날짜 - 반납일자 >= 10) 색상 지정

5번에서 확인한것 과 같이 두 날짜 사이는 10일 이상인 74일 이므로 grid의 줄 색깔이 바뀔것이다.