자바스크립트(Javascript)로 Date 범위 다루기

시작일자부터 종료일자까지 Date 범위를 다루는 방법이다. 자바스크립트의 Date 클래스를 활용하여 필요한 function을 추가하여 구현한다. 구현하고자 하는 바는 정확히 다음과 같다.

startDate ~ endDate 범위 내의 모든 일자를 출력

e.g. 2020년 5월 1일 부터 2020년 6월 8일 까지의 모든 날을 순차적으로 출력

addDays 함수 구현

Date 클래스를 활용하여 시작일부터 하루 증가해가며 구현하면 된다. N일을 증가하는 function을 제공하지 않으므로 직접 만들어보자.

Date.prototype.addDays = function(days) {
   var date = new Date(this.valueOf())
   date.setDate(date.getDate() + days);
   return date;
}

prototype 을 통해 addDays를 구현하고 N일 만큼 더할수 있으며, 음수값을 넣어 뺄수도 있다.

DateArray 함수 구현

Startdate, endDate 범위를 담고있는 함수를 구현하여 array date를 반환하도록 한다.

function getDates(startDate, stopDate) {
  var dateArray = new Array();
  var currentDate = startDate;
  while (currentDate <= stopDate) {
    dateArray.push(currentDate)
    currentDate = currentDate.addDays(1);
  }
  return dateArray;
}

addDays로 하루씩 증가하도록 하여 배열에 담는다.

Date 형태로 출력

ISODate 형태

Date 클래스의 toISODateString 함수로 쉽게 출력할 수 있지만, 원하는 것은 yyyy-MM-dd와 같은 형태라 시간 부분을 잘라내야 한다. 이를 function으로 구현.

function isodate(date) {
    var fulliso = date.toISOString();
    return fulliso.split("T")[0]
}

BasicDate 형태

이번엔 -없는 yyyyMMdd 형태로 출력하는 function을 구현한다.

function basicdate(date) {
    function pad(number) {
      if (number < 10) {
        return '0' + number;
      }
      return number;
    }

    return date.getUTCFullYear() + "" + pad(date.getUTCMonth() + 1) + "" + pad(date.getUTCDate())
}

제공해주는 함수가 없기 때문에 위와같이 직접 연도, 월, 일을 가져온 후 pad를 정의하여 위의 형태로 return하도록 한다.

최종 출력

var dateArray = getDates(new Date('2020-05-01'), new Date('2020-06-08'));

for (i = 0; i < dateArray.length; i ++ ) {
    var currDate = dateArray[i];

    var cdate = basicdate(currDate)
    var cdateISO = isodate(currDate)

    console.log(cdate)
      console.log(cdateISO)
}