[JS] jQuery 활용하여 시작일과 종료일 비교하여 일수 구하기 yyyy-mm-dd ~ yyyy-mm-dd = dd

서론

시작 날짜와 종료 날짜를 입력 받아 해당 범위 내의 모든 날짜 및 일자를 구할려고 합니다.

예를 들어 2024-04-12 ~ 2024-04-16의 값을 넣을 경우 12,13,14,15,16의 일자와

추가적으로 해당 값에 이벤트를 위해 필요한 2024-04-12,2024-04-13... 를 구하는 방식입니다.

 

해당 기능의 필요성은 예약이나 스케줄러 같은 달력 및 날짜를 활용할 때 많이 사용될 수 있기 때문에 알아보도록 하겠습니다.

 

함수구현

우선 작업 방식은 jQuery를 활용하여 진행이 되었으며, 기본적으로 jQuery는 세팅이 되어 있다는 과정하에 진행하겠습니다.

function createDateArrayWithJQuery(startDateStr, endDateStr) {
    var startDate = new Date(startDateStr);
    var endDate = new Date(endDateStr);
    var resultArray = [];

    var currentDate = startDate;
    while (currentDate <= endDate) {
        var dateStr = currentDate.toISOString().split('T')[0];
        var dayValue = currentDate.getDate();
        resultArray.push([dateStr, dayValue]); // 날짜와 일자를 배열로 저장
        currentDate.setDate(currentDate.getDate() + 1); // 날짜를 하루 증가
    }

    return resultArray;
}

 

1. 함수를 구현 후 시작일과 종료일을 넣어줍니다.

2. 날짜를 비교하기 때문에 new Date 를 활용하여 2024-04-12 일 경우 new Date로 날짜를 파싱하여 Date 타입 객체로 변환시켜줍니다.

3. 우린 이부분들을 배열로 담아 사용할 것이며, 12 ~ 14일 경우 12,13,14 다수의 데이터가 필요하여 배열에 담아둡니다.

4. toISOString을 사용하여 Data 객체를 문자열로 변환시킨 뒤 yyyy-mm-ddT~ 부부에서 필요없는 구문을 제거하기 위해 split('T')를 활용해줍니다.

 

$(document).ready(function() {
    var result = createDateArrayWithJQuery('2024-04-13', '2024-04-15');
    result.forEach(function(item) {
        $('#dateList').append('<p>Date: ' + item[0] + ', Day: ' + item[1] + '</p>');
    });
});

 

해당 데이터를 사용하게 되면 결과는 0:[2024-04-13,13],1:[2024-04-14,14] 형식으로 출력되는걸 확인하실 수 있습니다.

어떤 형식으로 배열에 담을 것인지는 자유입니다.