부트스트랩 기간 달력 시작/종료일 제한하기 (Bootstrap datepicker, daterange)

그림처럼 시작일보다 빠른 종료일을 선택할 수 없도록 제한한다. (반대 경우도 마찬가지)

문제

페이지마다 달력을 각자 구현해서 어디는 언어나 날짜 포맷 등이 모두 달랐다. 그리고 화면에 따라 달력 방향이 엉뚱하게 input 위로 나오는 것 등이 있어, 표준 마크업으로 정리하고 일괄 선언하기로 했다.

그 중 대부분 목록화면의 검색조건에 사용되는 기간 검색에 시작일/종료일 선택 제한을 추가했다. 시작일은 종료일보다 늦을 수 없고, 종료일은 시작일보다 빠를 수 없게 설정한다.

Bootstrap datepicker 공식 문서를 보니 startDate와 endDate 항목을 구현하면 된다고 한다. setStartDate와 setEndDate 메소드도 있다. 필요한 것이 모두 있으니 문제될 것이 없다. 아래처럼 간단하게 구현하였다.

구현 코드

MarkUp

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

Javascript

$("div.input-daterange").each(function(){
    var $inputs = $(this).find('input');
    $inputs.datepicker();
    if ($inputs.length >= 2) {
        var $from = $inputs.eq(0);
        var $to   = $inputs.eq(1);
        $from.on('changeDate', function (e) {
            var d = new Date(e.date.valueOf());
            $to.datepicker('setStartDate', d); // 종료일은 시작일보다 빠를 수 없다.
        });
        $to.on('changeDate', function (e) {
            var d = new Date(e.date.valueOf());
            $from.datepicker('setEndDate', d); // 시작일은 종료일보다 늦을 수 없다.
        });
    }
})

참고 자료

Bootstrap datepicker 공식 문서