datepicker 시작일과 종료일 설정시 사용하기 좋은 팁

http://blog.munilive.com/datepicker-%EC%8B%9C%EC%9E%91%EC%9D%BC%EA%B3%BC-%EC%A2%85%EB%A3%8C%EC%9D%BC-%EC%84%A4%EC%A0%95%EC%8B%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%A2%8B%EC%9D%80-%ED%8C%81/

datepicker 좋은 정보 많음

--------------------------------------------------------

웹프로그래밍을 하다보면 가끔 시작일과 종료일을 입력 받는 프로그램을 제작 하곤 한다. 사용자에게 날짜를 입력 받아야 하는데 텍스트박스만 떡하니 나두면 사용자가 제대로 된 데이터를 입력하지 않아 에러가 발생 될수 있다. 이럴 경우를 대비하여 보통 달력을 띄우거나 셀렉트박스로 만들게 되는데 셀렉트박스 보다는 jquery ui에서 지원하는 datepicker를 이용하는게 훨씬 쉬울것이다.

datepicker 를 이용하면 사용자에게 날짜를 입력 받는 것이 너무나도 쉽다. 하지만 시작일과 종료일을 받아야 하는 상황에서 사용자가 시작일을 종료일보다 뒤의 날짜를 선택하거나 종요일을 시작일 보다 앞의 날짜를 선택한다면 원하는 결과를 가져올수 없을 것이다.

그럼 datepicker 로 시작일을 선택할때 종료일보다 나중의 날은 선택 할수 없게 하고, 종료일을 선택할때는 시작일 이후로만 선택 할수 있게 한다면?
위에서 말한 오류는 충분히 방지 할 수 있을 것이다.
그렇다면 datepicker 에서 시작일일에는 자동으로 종료일보다 먼저인 날짜만 종료일에는 자동으로 시작일보다 나중인 날짜만 선택하는 아래 소스를 참고하자.!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

$(document).ready(function () {     $.datepicker.regional['ko'] = {         closeText: '닫기',         prevText: '이전달',         nextText: '다음달',         currentText: '오늘',         monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',         '7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],         monthNamesShort: ['1월','2월','3월','4월','5월','6월',         '7월','8월','9월','10월','11월','12월'],         dayNames: ['일','월','화','수','목','금','토'],         dayNamesShort: ['일','월','화','수','목','금','토'],         dayNamesMin: ['일','월','화','수','목','금','토'],         weekHeader: 'Wk',         dateFormat: 'yy-mm-dd',         firstDay: 0,         isRTL: false,         showMonthAfterYear: true,         yearSuffix: '',         showOn: 'both',         buttonText: "달력",         changeMonth: true,         changeYear: true,         showButtonPanel: true,         yearRange: 'c-99:c+99',     };     $.datepicker.setDefaults($.datepicker.regional['ko']);       $('#sdate').datepicker();     $('#sdate').datepicker("option", "maxDate", $("#edate").val());     $('#sdate').datepicker("option", "onClose", function ( selectedDate ) {         $("#edate").datepicker( "option", "minDate", selectedDate );     });       $('#edate').datepicker();     $('#edate').datepicker("option", "minDate", $("#sdate").val());     $('#edate').datepicker("option", "onClose", function ( selectedDate ) {         $("#sdate").datepicker( "option", "maxDate", selectedDate );     }); });

datepicker 의 메소드 중 onClose를 이용하여 사용자가 날짜를 선택 하면 반대 달력의 maxDate와 minDate를 지정하여 선택하지 못하도록 하는 방식이다.

위 소스를 적용한 예제를 확인하려면 여기를 클릭 하도록 하자.

(추가:2013-09-28)
신영기님의 코멘트를 보고 해당 내용을 추가하였다.
추가된 예제에는 기본 시작일과 종료일을 자바스크립트로 계산하여 입력하도록 추가 하였고 종료일을의 maxDate를 시작일+7일 로 설정 되도록 추가 하였다.
예제확인하기