Javascript DatePicker 사용법(시작날짜와 종료날짜 날짜 제한)

개발 환경 : Jquery, datepicker

 

datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록

기능 구현이 필요했다.

시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를

시작날짜 + 10일로 변경하도록 기능 구현했다.

 

HTML

시작날짜 : <input class="callflow-date-start"/ ><br/>
종료날짜 : <input class="callflow-date-end" />

 

javascript 

$('.callflow-date-start').datepicker({
	changeMonth: true,
    changeYear: true,
    selectOtherMonths: true,
    showButtonPanel: true,
    yearRange: "c-50:c+50",
    dateFormat: "yy-mm-dd",
    onSelect: function(selectedDate){
    	var start = $(this).datepicker('getDate');
        var endDate = $('.callflow-date-end').datepicker('getDate');
        var diffDate = start.getTime() - endDate.getTime();
        var diffDay = Math.abs(diffDate / (1000 * 60 * 60 * 24));
        
        if(diffDay > 10){
        	alert('최대 10일까지 검색 가능합니다.');
            var startTemp = new Date(start);
            startTemp.setDate(start.getDate() + 10);
            var endDateStr = startTemp.getFullYear() + '-'
            				+ ((startTemp.getMonth() + 1) > 10 ? (startTemp.getMonth() + 1) : ("0" + (startTemp.getMonth() + 1))) + '-'
                            + startTemp.getDate();
			$('.callflow-date-end').datepicker('option', 'minDate', new Date(start.getTime()));
            $('.callflow-date-end').datepicker('setDate', endDateStr);
        }else {
        	$('.callflow-date-end').datepicker('option', 'minDate', new Date(start.getTime()));
        }
    }
})

$('.callflow-date-end').datepicker({
	changeMonth: true,
    changeYear: true,
    selectOtherMonths: true,
    showButtonPanel: true,
    yearRange: "c-50:c+50",
    dateFormat: "yy-mm-dd",
    onSelect: function(selectedDate){
    	var end = $(this).datepicker('getDate');
        var startDate = $('.callflow-date-start').datepicker('getDate');
        var diffDate = startDate.getTime() - end.getTime();
        var diffDay = Math.abs(diffDate / (1000 * 60 * 60 * 24));
        
        if(diffDay > 10){
        	alert('최대 10일까지 검색 가능합니다.');
            var endTemp = new Date(end);
            endTemp.setDate(end.getDate() + 10);
            var startDateStr = endTemp.getFullYear() + '-'
            				+ ((endTemp.getMonth() + 1) > 10 ? (endTemp.getMonth() + 1) : ("0" + (endTemp.getMonth() + 1))) + '-'
                            + endTemp.getDate();
			$('.callflow-date-start').datepicker('option', 'minDate', new Date(end.getTime()));
            $('.callflow-date-start').datepicker('setDate', startDateStr);
        }else {
        	$('.callflow-date-start').datepicker('option', 'minDate', new Date(end.getTime()));
        }
    }
})

 

var start = $(this).datepicker('getDate');
var endDate = $('.callflow-date-end').datepicker('getDate');

시작날짜와 종료날짜를 datepicker 의 getDate 함수를 통해 선택 날짜를 불러온다.

 

var diffDate = start.getTime() - endDate.getTime();
var diffDay = Math.abs(diffDate / (1000 * 60 * 60 * 24));

getTime() 메서드를 통해 해당 날짜의 시간을 밀리초로 계산하여 값을 반환한다.

시작날짜의 밀리초 - 종료날짜의 밀리초 를 통해 시간이 얼마나 지났는지 판단한다.

 

뺀값에 1000을 곱하면 초가 되며, 60을 곱하여 분, 60을 곱하면 시간, 24를 곱하면 Day인 날짜가 된다.

 

diffDay 가 시작날짜와 종료날짜가 몇일차이인지 나온다.

 

var startTemp = new Date(start);
startTemp.setDate(start.getDate() + 10);

start(시작날짜) 선택 날짜 기준으로 새로운 Date 객체를 생성하고 해당 날짜에 선택날짜 + 10일을 한다.

 

var endDateStr = startTemp.getFullYear() + '-' + ((startTemp.getMonth() + 1) > 10 ?
(startTemp.getMonth() + 1) : ("0" + (startTemp.getMonth() + 1))) + '-' + startTemp.getDate();

날짜를 "yyyy-MM-dd" 형식의 문자열로 만든다.

 

$('.callflow-date-end').datepicker('option', 'minDate', new Date(start.getTime()));
$('.callflow-date-end').datepicker('setDate', endDateStr);

종료날짜를 datepicker 의 option 인 minDate(최소날짜) 함수를 사용해

선택날짜 기준으로 최소날짜를 변경한다.

이렇게 최소날짜를 변경하게 되면 종료날짜의 datepicker 에서는 시작날짜부터 선택할 수 있게 된다.

 

datepicker 의 setDate() 함수를 통해 시작날짜의 최소 + 10 일로 변경해준다.