jQuery prev_week / next_week 유틸 함수로 YYYY-MM-DD 날짜 이동하기

jQuery로 일주일 전·후 날짜 구하기 – prev_week, next_week 함수 구현

웹 화면에서 지난 주 / 다음 주로 이동하는 달력이나 통계 화면을 만들다 보면 “일주일 전 날짜”, “일주일 후 날짜”를 쉽게 구하는 함수가 있으면 편합니다.

jQuery 자체에는 날짜 계산 기능이 없기 때문에 prev_week, next_week 같은 함수는 직접 구현해야 합니다. 이 글에서는 JavaScript의 Date 객체를 활용해 YYYY-MM-DD 형식으로 일주일 전/후 날짜를 계산하는 방법을 정리합니다.

1. prev_week / next_week 기본 구현 코드

아래 예제는 문자열 날짜(YYYY-MM-DD)를 받아서 일주일 전/후 날짜를 반환하는 함수입니다.

function prev_week(date) {
  // date를 JavaScript Date 객체로 변환합니다.
  var newDate = new Date(date);
  // 7일 전의 날짜를 계산합니다.
  newDate.setDate(newDate.getDate() - 7);
  // YYYY-MM-DD 형식으로 반환합니다.
  return newDate.toISOString().substring(0, 10);
}

function next_week(date) {
  // date를 JavaScript Date 객체로 변환합니다.
  var newDate = new Date(date);
  // 7일 후의 날짜를 계산합니다.
  newDate.setDate(newDate.getDate() + 7);
  // YYYY-MM-DD 형식으로 반환합니다.
  return newDate.toISOString().substring(0, 10);
}
  

위 함수는 각각 7일 전 / 7일 후의 날짜를 구한 뒤, toISOString()으로 문자열로 바꾸고 앞 10자리(YYYY-MM-DD)만 잘라서 반환합니다.

예시 결과

prev_week('2023-04-21'); // "2023-04-14"
next_week('2023-04-21'); // "2023-04-28"
  

이렇게 구현해두면 캘린더, 통계 조회, 스케줄 화면에서 기준 날짜만 바꿔가며 이전 주 / 다음 주 버튼 기능을 쉽게 만들 수 있습니다.

2. jQuery와 함께 사용하는 예제 (이전 주 / 다음 주 버튼)

위 함수들은 순수 JavaScript이지만, jQuery 이벤트와 조합하면 UI 버튼에 쉽게 연결할 수 있습니다.

HTML에 현재 날짜와 버튼이 있다고 가정해 봅시다.

<input type="text" id="baseDate" value="2023-04-21" readonly>
<button id="btnPrevWeek">이전 주</button>
<button id="btnNextWeek">다음 주</button>
  

여기에 jQuery 클릭 이벤트를 연결합니다.

$(function () {
  $('#btnPrevWeek').on('click', function () {
    var current = $('#baseDate').val();
    var result = prev_week(current);
    $('#baseDate').val(result);
    // 필요하다면 이 날짜로 AJAX 조회 등 추가 작업
  });

  $('#btnNextWeek').on('click', function () {
    var current = $('#baseDate').val();
    var result = next_week(current);
    $('#baseDate').val(result);
    // 필요하다면 이 날짜로 AJAX 조회 등 추가 작업
  });
});
  

이렇게 하면 “이전 주”, “다음 주” 버튼을 눌렀을 때 자동으로 날짜가 바뀌는 UI를 간단하게 구성할 수 있습니다.

3. toISOString() 사용 시 주의할 점

toISOString()은 UTC 기준 시간을 사용하기 때문에, 로컬 타임존과의 시차에 따라 날짜가 하루 앞/뒤로 밀리는 현상이 생길 수 있습니다.

이 문제를 피하고 싶다면, 직접 연/월/일을 포맷팅하는 함수를 만들어 사용하는 방법도 있습니다.

function formatDate(dateObj) {
  var year  = dateObj.getFullYear();
  var month = ('0' + (dateObj.getMonth() + 1)).slice(-2); // 01 ~ 12
  var day   = ('0' + dateObj.getDate()).slice(-2);        // 01 ~ 31
  return year + '-' + month + '-' + day;
}

function prev_week(date) {
  var newDate = new Date(date);
  newDate.setDate(newDate.getDate() - 7);
  return formatDate(newDate); // ✅ 로컬 기준 YYYY-MM-DD
}

function next_week(date) {
  var newDate = new Date(date);
  newDate.setDate(newDate.getDate() + 7);
  return formatDate(newDate);
}
  

이 방식은 로컬 기준 날짜로 계산되기 때문에 한국 같은 UTC+9 환경에서도 날짜가 어긋날 가능성이 줄어듭니다.

4. prev_week / next_week와 함께 쓰기 좋은 패턴

• 주간 데이터 조회: 통계, 로그, 스케줄 등에서 “지난 주 / 다음 주” 범위를 바꿀 때
• 캘린더 네비게이션: 주 단위 캘린더 화면의 상단 네비게이션 버튼
• 리포트 화면: “이번 주”, “지난 주”, “다음 주” 버튼으로 자동 날짜 이동

날짜 계산을 한 곳에서 함수로 관리하면 화면이 여러 개일 때도 로직을 재사용하기 쉽고, 유지보수도 훨씬 편해집니다.

5. 정리

jQuery에는 날짜 관련 내장 기능이 없으므로 JavaScript의 Date 객체를 활용해 prev_week, next_week 같은 유틸 함수를 직접 만들어야 합니다.

• new Date(date)로 기준 날짜 생성
• setDate(getDate() ± 7)으로 일주일 전/후 계산
• YYYY-MM-DD 형식으로 포맷팅해서 반환
• jQuery 클릭 이벤트와 조합해서 “이전 주 / 다음 주” 버튼 구현

위 예제를 그대로 가져다 쓰면서 화면에 맞게 ID만 변경하면, 주간 네비게이션이 있는 달력/통계/리포트 화면을 빠르게 완성할 수 있습니다.