이번 포스팅에서는 Datepicker를 활용하여 시작일과 종료일 제한을 주도록 하겠습니다.
활용 방법으로는 검색 조건으로 Datepicker를 사용하여 시작일/종료일로 검색이 가능해지겠네요.
1 2 3 | <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> | cs |
가장 먼저, 위의 스크립트들을 JSP 위쪽에 붙여 넣어 줍니다.
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 41 | <script type="text/javascript"> $(document).ready(function () { $.datepicker.setDefaults($.datepicker.regional['ko']); $( "#startDate" ).datepicker({ changeMonth: true, changeYear: true, nextText: '다음 달', prevText: '이전 달', dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], dateFormat: "yymmdd", maxDate: 0, // 선택할수있는 최소날짜, ( 0 : 오늘 이후 날짜 선택 불가) onClose: function( selectedDate ) { //시작일(startDate) datepicker가 닫힐때 //종료일(endDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정 $("#endDate").datepicker( "option", "minDate", selectedDate ); } }); $( "#endDate" ).datepicker({ changeMonth: true, changeYear: true, nextText: '다음 달', prevText: '이전 달', dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], dateFormat: "yymmdd", maxDate: 0, // 선택할수있는 최대날짜, ( 0 : 오늘 이후 날짜 선택 불가) onClose: function( selectedDate ) { // 종료일(endDate) datepicker가 닫힐때 // 시작일(startDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 시작일로 지정 $("#startDate").datepicker( "option", "maxDate", selectedDate ); } }); }); </script> | cs |
스크립트 추가 후 <head> </head> 사이에 위와 같은 스크립트를 붙여 넣어줍니다.
1 2 | <input type="text" id="startDate"> <input type="text" id="endDate"> | cs |
마지막으로 <body> </body> 사이에 위와 같은 스크립트를 붙여 넣어주면 끝입니다.
실행화면
input 태그 디자인의 경우, 뭐 입맛에 맞게 변경해주시면 될 듯합니다.
datepicker 관련 옵션은 아래에 별도로 첨부합니다.
showOn: "button" 옵션을 추가 했을 때
참고 사이트
http://www.nextree.co.kr/p9887/
http://jqueryui.com/datepicker/