[JavaScript] 버튼 클릭 시 전주, 차주 이동

Introduction

다음 동영상과 같이 back 버튼을 누르면 전주로, next 버튼을 누르면 차주로 날짜가 바뀌는 것을 JavaScript로 구현해보려 한다.

대략적인 순서는 다음과 같다.

1. 현재의 날짜 범위 중 시작 날짜를 가져온다. (ex. 2023-02-06)

2. 전주 이동과 차주 이동을 구분한다.

3. for문을 이용하여 현재 날짜의 전주/차주를 월~일 순으로 객체 생성한다.

4. 생성된 객체의 일자를 각각 요일에 맞게 순서대로 삽입한다.

5. 새로 생성된 날짜 범위를 갱신한다.

 

※ 이때, 전주/차주의 기준점이 되는 주는 항상 화면에 렌더링 된 것을 가져와 사용한다.

ex) 현재 날짜 범위가 2023-02-06 ~ 2023-02-12 에서 차주 버튼을 누르면 현재 날짜 범위는 2023-02-13 ~ 2023-02-19로 변경,

       이제는 2023-02-13 ~ 2023-02-19의 날짜 범위를 기준으로 전주/차주를 계산한다.

 

① 현재의 날짜 범위 중 시작 날짜를 가져온다.

let week = document.getElementById('weekRange');
console.log(week.innerText); // 2023-02-20 ~ 2023-02-26
let lastDate = week.innerText.split(" ")[1]; // 시작 날짜
let nextDate = week.innerText.split(" ")[3]; // 종료 날짜

 

② 전주 이동과 차주 이동을 구분한다.

const nowClick = event.currentTarget; //현재 선택한 태그의 정보를 변수에 담음

//전주 버튼을 클릭한 경우
if(nowClick.id === 'lastWeek'){
	~
}

//차주 버튼을 클릭한 경우
else if (nowClick.id === 'nextWeek') {
	~
}

 

③ for문을 이용하여 현재 날짜의 전주를 월~일 순으로 객체 생성한다.

//현재 일주일 범위 중 시작 날짜를 년, 월, 일로 나누고 각각 변수에 할당
let backYear = lastDate.split("-")[0];
let backMon = lastDate.split("-")[1];
let backDay = lastDate.split("-")[2];

//"year-month-day" 의 형태로 변환하는 함수
function formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();

        return (myyear + "-" + mymonth + "-" + myweekday);
}
  
for(var j = 0; j < 7; j++){
		//전주의 월요일부터 일요일까지 각각 객체 생성
        let lastweekStartDate = new Date(+backYear, +backMon - 1, +backDay + (j - 7));

		//formatDate 함수 호출
        var backFormatDate = formatDate(lastweekStartDate);

		//"yyyy-mm-dd" 의 형식을 맞추기 위함
        backFormatDate = backFormatDate.split("-");
        backFormatDate[1] = backFormatDate[1].length == 2 ? backFormatDate[1] : "0" + backFormatDate[1]
        backFormatDate[2] = backFormatDate[2].length == 2 ? backFormatDate[2] : "0" + backFormatDate[2]
        
        ~
}

 

④ 생성된 객체의 일자를 각각 요일에 맞게 순서대로 삽입한다.

//각 날짜마다 객체 생성 후 요일에 맞게 일자를 삽입
//for문 안에서 진행

let nowDay;
nowDay = document.getElementById(`date${j + 1}`); // 각각의 날짜 태그
//구분하기 위해서 날짜 태그 안에 새로운 div 태그를 만들어 id로 해당 날짜의 년, 월을 넣어준다.
nowDay.innerHTML = `<div id=${backFormatDate[0]}-${backFormatDate[1]}>${backFormatDate[2]}</div>`

 

⑤ 새로 생성된 날짜 범위를 갱신한다.

//형식 변경을 위해 잘랐던 날짜 문자열을 "yyyy-mm-dd"의 형식에 맞게 다시 합친다.
backFormatDate = backFormatDate[0] + "-" + backFormatDate[1] + "-" + backFormatDate[2];

//일주일 중 첫날
if(j === 0){
  sDate = backFormatDate;
} 
//일주일 중 마지막 날
else if(j === 6){
  eDate = backFormatDate;
}

//날짜 범위 태그 가져옴
var weekBack = document.getElementById('weekRange');

//새로운 날짜 범위 갱신
weekBack.innerHTML = `
    <button type="button" id="lastWeek" class="lastWeek" onclick="moveWeek()"><img src="/picture?img=left_arrow.png" alt="좌" onclick="moveWeek()"/></button>
    ${sDate} ~ ${eDate}
    <button type="button" id="nextWeek" class="nextWeek" onclick="moveWeek()"><img src="/picture?img=right_arrow.png" alt="우" onclick="moveWeek()"/></button>
`

 

차주도 동일하게 진행!

 

참고한 블로그

https://m.blog.naver.com/chunsj78/221580726183