jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다.

• 특정 기간 범위 설정
• 특정 기간 범위만 활성화
• 시작 달력과 끝 달력에 오늘 이전 날짜들은 기본 비활성화 한다.
• 시작 달력과 끝 달력을 수차례 수정해도 특정 기간 범위를 넘길 수 없게 만듦
• 시작 달력과 끝 달력의 날짜 선택이 거꾸로 될 수 없게 만듦

기간 선택

조회

위 처럼 input을 두개 두고 시작 달력은 #from, 끝 달력은 #to 로 지정하였다.

var rangeDate = 31; // set limit day
var setSdate, setEdate;
$("#from").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: 0,
    onSelect: function(selectDate){
        var stxt = selectDate.split("-");
            stxt[1] = stxt[1] - 1;
        var sdate = new Date(stxt[0], stxt[1], stxt[2]);
        var edate = new Date(stxt[0], stxt[1], stxt[2]);
            edate.setDate(sdate.getDate() + rangeDate);

        $('#to').datepicker('option', {
            minDate: selectDate,
            beforeShow : function () {
                $("#to").datepicker( "option", "maxDate", edate );
                setSdate = selectDate;
                console.log(setSdate)
        }});
        //to 설정
    }
    //from 선택되었을 때
});

$("#to").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect : function(selectDate){
        setEdate = selectDate;
        console.log(setEdate)
    }
});

rangeDate 는 특정 기간 범위이다.
예로 31일을 설정하였다.

이제 유효 검사를 추가해본다.

$('.btn').on('click', function(e){
    if($('input#from').val() == ''){
        alert('시작일을 선택해주세요.');
        $('input#from').focus();
        return false;
    }else if($('input#to').val() == ''){
        alert('종료일을 선택해주세요.');
        $('input#to').focus();
        return false;
    }

    var t1 = $('input#from').val().split("-");
    var t2 = $('input#to').val().split("-");
    var t1date = new Date(t1[0], t1[1], t1[2]);
    var t2date = new Date(t2[0], t2[1], t2[2]);
    var diff = t2date - t1date;
    var currDay = 24 * 60 * 60 * 1000;
    if(parseInt(diff/currDay) > rangeDate){
        alert('로그 조회 기간은 ' + rangeDate + '일을 초과할 수 없습니다.');
        return false;
    }

    alert("성공")
});
//조회 버튼 클릭

.btn이라는 클래스를 가진 버튼 엘리먼트를 누르면 검색 범위를 초과한 경우 다시 경고창이 뜨고 다시 설정하도록 인도한다.

아래 코드 결과 화면을 참고하자.