이번 포스팅에서는 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/


+ Recent posts