bootstrap-datepicker로 일 선택, 월 선택 전환 가능하게 만들기

 이번 프로젝트에서 나를 제일 애먹인 건 데이트피커였다... 챗GPT한테도 물어보고 인터넷에도 찾아봤지만 비슷한 기능에 대한 정보가 없어서 내가 구현한 내용을 정리해본다. 구현해야 하는 기능은 아래와 같았다.

---

• 라디오버튼 "일", "월"이 있고, "일"을 선택하면 데이트피커로 일단위 선택을 할 수 있고, "월"을 선택하면 데이트피커로 월단위 선택을 할 수 있다.
• 선택한 날짜에 따라 날짜 선택 범위가 제한된다.(예를 들어, 시작일을 4월을 선택하면 종료일은 4월 전을 선택할 수 없고, 시작일도 종료일을 넘겨서 선택할 수 없다.)
• 기본 데이트피커에서 선택 가능한 최대 과거일은 3개월전, 선택 가능한 최소 현재일은 전일이다.

---

<input type="radio" name="searchType" id="day" value="DAY" checked="checked" onclick="testView.changeDatepicker()">일</div>
<input type="radio" name="searchType" id="month" value="MONTH" onclick="testView.changeDatepicker()">월</div>

 위와 같은 라디오버튼을 만들었고, 각 라디오버튼에 클릭하면 데이트피커를 변경하는 메서드를 걸어주었다.

if ($('#day').is(':checked')) {
    // 일단위 데이트피커를 만든다.
    let yesterdayDate = util.dateAdd(new Date, -1);
    let defaultDate = util.monthAdd(yesterdayDate, -3);

    // 시작일, 종료일 input[name="startSearchDate"], input[name="endSearchDate"]에 설정해주는 부분 필요

    // 기존 시작일 데이트피커 삭제
    $('#sDatepicker').datepicker('destroy');

    // 시작일 데이트피커 생성
    $('#sDatepicker').datepicker({
        autoclose	: true,
        format		: "yyyy-mm-dd",
        language	: "kr",
        startDate   : defaultDate,
        endDate		: yesterdayDate
    }).on("changeDate", function(e) {
        if ($('input', this).attr('name').indexOf("startSearchDate") >= 0) {
            $("#eDatepicker").datepicker('setStartDate', e.date);
        } else {
            $("#sDatepicker").datepicker('setEndDate', e.date);
        }
    });

    // 기존 종료일 데이트피커 삭제
    $('#eDatepicker').datepicker('destroy');

    // 종료일 데이트피커 생성
    $('#eDatepicker').datepicker({
        autoclose	: true,
        format		: "yyyy-mm-dd",
        language	: "kr",
        startDate   : defaultDate,
        endDate		: yesterdayDate
    }).on("changeDate", function(e) {
        if ($('input', this).attr('name').indexOf("startSearchDate") >= 0) {
            $("#eDatepicker").datepicker('setStartDate', e.date);
        } else {
            $("#sDatepicker").datepicker('setEndDate', e.date);
        }
    });
}

if ($('#month').is(':checked')) {
    // 월단위 데이트피커를 만든다.
    let yesterdayDate = util.dateAdd(new Date, -1);
    let defaultDate = util.monthAdd(yesterdayDate, -3);

    // 시작월, 종료월 input[name="startSearchDate"], input[name="endSearchDate"]에 설정해주는 부분 필요

    $('#sDatepicker').datepicker('destroy');

    $('#sDatepicker').datepicker({
        minViewMode:1, // 월
        autoclose	: true,
        format		: "yyyy-mm",
        language	: "kr",
        startDate   : '-3m', // 3개월전부터 선택 가능
        endDate		: yesterdayDate.format("yyyy-MM"), // 전일까지 선택 가능
    }).on("changeDate", function(e) {
        if ($('input', this).attr('name').indexOf("startSearchDate") >= 0) {
            $("#eDatepicker").datepicker('setStartDate', e.date);
        } else {
            $("#sDatepicker").datepicker('setEndDate', e.date);
        }
    });

    $('#eDatepicker').datepicker('destroy');

    $('#eDatepicker').datepicker({
        minViewMode:1, // 월
        autoclose	: true,
        format		: "yyyy-mm",
        language	: "kr",
        startDate: '-3m', // 3개월전부터 선택 가능
        endDate		: yesterdayDate.format("yyyy-MM"), // 전일까지 선택 가능
    }).on("changeDate", function(e) {
        if ($('input', this).attr('name').indexOf("startSearchDate") >= 0) {
            $("#eDatepicker").datepicker('setStartDate', e.date);
        } else {
            $("#sDatepicker").datepicker('setEndDate', e.date);
        }
    });
};

 위 메서드에서 중요한 부분은
 첫번째, 데이트피커를 교체할 때 각 데이트피커별로 따로 잡아서 destroy()를 한 뒤에 각 데이트피커를 만드는 부분,
 두번째, 월단위 데이트피커를 만들 때 날짜를 format해주는 부분이었다.

 데이트피커를 같이 잡고 destroy()를 하려고 하면 제대로 동작하지 않는 문제가 있었다. 그래서 각각 destroy()를 해주고 만드니 제대로 동작했다.

 그리고 월단위 데이트피커를 만들 때에는 날짜를 세팅할 때 주의해야 했다. 그냥 아래 틀린 예와 같이 endDate를 설정하면

// 바른 예
endDate : yestdayDate.format("yyyy-MM"),

// 틀린 예
endDate : yesterdayDate,

 데이트피커가 아래와 같이 표시된다. 이게 뭐가 문제냐면 아무 날짜도 선택된 상태가 아니기 때문에 아무 날짜도 선택하지 않고 그냥 데이트피커를 닫아버리면 원래 있던 날짜마저도 사라지게 된다. 그렇기 때문에 위의 바른 예처럼 format("yyyy-MM")을 해줘야 한다.(무슨 이유인진 몰라도 format("yyyy-mm")을 해도 안된다. 꼭 저렇게 해야 한다.)

 바른 예대로 하면 날짜가 선택된 상태이기 때문에 파란색으로 표시되고, 이 상태에서 아무 날짜도 선택하지 않고 그냥 데이트피커를 닫더라도 날짜는 유지된다.

(좌)틀린 예 / (우)바른 예

(좌)틀린 예 / (우)바른 예

---

문제점

이렇게 하더라도 한 가지 문제가 있다. 종료월을 시작월과 같게 맞춰버리면 시작월이 위의 틀린 예와 같이 선택되지 않은 것으로 표시된다. 결국 이 문제는 해결하지 못했다. 다행히 로직상 시작일이 비어있는 채로 검색버튼을 클릭하면 시작일을 입력해달라고 경고창을 띄우기 때문에 어쨌든 사용자가 날짜를 선택하게 되어 이 문제는 여기에서 끝냈다.