티스토리 뷰

업무/스프링프로젝트

[JS] jQuery datepicker / 달력 플러그인 / 날짜제한검색

/daydreamer 2016. 8. 4. 13:27


오늘날짜 구하는 방법

1
var today = $.datepicker.formatDate('yy-mm-dd', new Date());
cs



내일날짜 구하는 방법

1
2
3
var date = new Date(); 
date.setDate(date.getDate() + 1);
var dt_to_tomorrow = $.datepicker.formatDate('yy-mm-dd', date);
cs



데이터피커 사용하기

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
42
43
44
45
46
              //검색 날짜제한 
             $(function() {              
                 
               //datepicker 한국어로 사용하기 위한 언어설정
               $.datepicker.setDefaults($.datepicker.regional['ko']); 
               
               // 시작일(fromDate)은 종료일(toDate) 이후 날짜 선택 불가
               // 종료일(toDate)은 시작일(fromDate) 이전 날짜 선택 불가
 
               //시작일.
               $('#fromDate').datepicker({
                    //dateFormat: "yy-mm-dd",
                    //monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                    //dayNamesMin:["일","월","화","수","목","금","토"],
                   //buttonImage: "/jdAdmin/images/calendar.png", // 버튼 이미지
                   //buttonImageOnly : true,             // 버튼 이미지만 표시할지 여부
                   //buttonText: "날짜선택",             // 버튼의 대체 텍스트
                   dateFormat: "yy-mm-dd",             // 날짜의 형식
                   changeMonth: true,                  // 월을 이동하기 위한 선택상자 표시여부
                       maxDate: 0,                       // 선택할수있는 최소날짜, ( 0 : 오늘 이후 날짜 선택 불가)
                   onClose: function( selectedDate ) {    
                       // 시작일(fromDate) datepicker가 닫힐때
                       // 종료일(toDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
                       $("#toDate").datepicker( "option", "minDate", selectedDate );
                   }                
               });
 
               //종료일
               $('#toDate').datepicker({
                    //dateFormat: "yy-mm-dd",
                    //monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                    //dayNamesMin:["일","월","화","수","목","금","토"], 
                   dateFormat: "yy-mm-dd",
                   changeMonth: true,
                   maxDate: 0, // 오늘 이후 날짜 선택 불가
                   onClose: function( selectedDate ) {
                       // 종료일(toDate) datepicker가 닫힐때
                       // 시작일(fromDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 
                       $("#fromDate").datepicker( "option", "maxDate", selectedDate );
                   }                
               });
               
               
               
           });
 
cs



날짜 제한 하기 : 검색시 날짜 제한이 최대 7일, 그러니까 일주일 단위로만 검색할 수 있게 만드는것.
   
var date = $(this).datepicker('getDate');
                       
                       date.setDate(date.getDate() + 7); // Add 7 days
                       $('#toDate').datepicker("option", "maxDate", date); // Set as default


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
42
43
44
45
46
47
48
49
50
51
                //검색 날짜제한 
             $(function() {              
                 
               //datepicker 한국어로 사용하기 위한 언어설정
               $.datepicker.setDefaults($.datepicker.regional['ko']); 
               
               // 시작일(fromDate)은 종료일(toDate) 이후 날짜 선택 불가
               // 종료일(toDate)은 시작일(fromDate) 이전 날짜 선택 불가
 
               //시작일.
               $('#fromDate').datepicker({
                    //dateFormat: "yy-mm-dd",
                    //monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                    //dayNamesMin:["일","월","화","수","목","금","토"],
                   //buttonImage: "/jdAdmin/images/calendar.png", // 버튼 이미지
                   //buttonImageOnly : true,             // 버튼 이미지만 표시할지 여부
                   //buttonText: "날짜선택",             // 버튼의 대체 텍스트
                   dateFormat: "yy-mm-dd",             // 날짜의 형식
                   changeMonth: true,                  // 월을 이동하기 위한 선택상자 표시여부
                       maxDate: 0,                       // 선택할수있는 최소날짜, ( 0 : 오늘 이후 날짜 선택 불가)
                   onClose: function( selectedDate ) {    
                       // 시작일(fromDate) datepicker가 닫힐때
                       // 종료일(toDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
                       $("#toDate").datepicker( "option", "minDate", selectedDate );
                       
                       var date = $(this).datepicker('getDate');
                       
                       date.setDate(date.getDate() + 7); // Add 7 days
                       $('#toDate').datepicker("option", "maxDate", date); // Set as default
                   }                
               });
 
               //종료일
               $('#toDate').datepicker({
                    //dateFormat: "yy-mm-dd",
                    //monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                    //dayNamesMin:["일","월","화","수","목","금","토"], 
                   dateFormat: "yy-mm-dd",
                   changeMonth: true,
                   maxDate: 0, // 오늘 이후 날짜 선택 불가
                   onClose: function( selectedDate ) {
                       // 종료일(toDate) datepicker가 닫힐때
                       // 시작일(fromDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 
                       $("#fromDate").datepicker( "option", "maxDate", selectedDate );
                   }                
               });
               
               
               
           });
 
cs


저작자표시

'업무 > 스프링프로젝트' 카테고리의 다른 글

[JS] selectBox 동적 option / jQuery / append(html)  (0) 2016.08.24
[JS] 검색시 button 이벤트 / 엔터 이벤트 / click event / keyup event  (0) 2016.08.12
[JS] 제이쿼리(jQuery) 반복문 / $().each(function(){}); / split  (0) 2016.07.19
[Spring] 몇가지 이해할 수 있게 된 것들(이제보니 이건뭐냐)  (0) 2016.07.19
[Spring] 스프링 기본 / DB값 Select 해서 화면에 보여주기(2)  (0) 2016.07.18
공유하기 링크
댓글