[JQuery]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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

기본 사용법 $(function() {     $( "#searchDate" ).datepicker({         method     }); });     메소드 종류 showOn: 'button'     //우측에 달력 버튼 사용 buttonImage: '/images/icon_cal.gif'     //버튼을 이미지로 buttonImageOnly: true     //버튼만 사용(원래는 인풋박스 클릭) buttonText:"달력"    //버튼 텍스트 showButtonPanel: true     //하단 버튼 패널 보이기(today,done) showMonthAfterYear:true     //년도 다음에 월 표시 dateFormat: 'yymmdd'    //날짜표시포맷(yymmdd,yy.mm.dd,yy-mm-dd 등) changeYear: true    //년도 선택 셀렉트 박스 표시 changeMonth: true    //월 선택 셀렉트 박스 표시 minDate: '-0d'    //최소 이전 날짜(-0d:오늘부터) null은 제한없음 showOtherMonths: true    //나머지날짜도 화면에 표시,선택은 불가 selectOtherMonths: false    //나머지날짜도 선택하려면 true    //한글화     $.datepicker.regional['ko']= {           closeText:'닫기',           prevText:'이전달',           nextText:'다음달',           currentText:'오늘',           monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],           monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],           dayNames:['일','월','화','수','목','금','토'],           dayNamesShort:['일','월','화','수','목','금','토'],           dayNamesMin:['일','월','화','수','목','금','토']};      $.datepicker.setDefaults( $.datepicker.regional[ 'ko' ] ); //토,일요일 선택 불가 function noWeekend(date) {       return [date.getDay() != 0 && date.getDay() != 6, '']; } beforeShowDay: noWeekend 메소드 추가 // 토,일요일 색깔 변경 .ui-datepicker-week-end {color:red;} .ui-datepicker-week-end .ui-state-default {color:red;} //휴일을 배열로 설정      var holidays = {             "0101":{type:0, title:"신정"},             "0301":{type:0, title:"삼일절"},             "0505":{type:0, title:"어린이날"},             "0606":{type:0, title:"현충일"},             "0815":{type:0, title:"광복절"},             "1003":{type:0, title:"개천절"},             "1225":{type:0, title:"크리스마스"}     };     var holiday = holidays[$.datepicker.formatDate("mmdd",day )]; //표시날이 휴일인지 체크     //css     .date-holiday0 .ui-state-default {  background-image: none; background-color: #684468;border-color: #535353}     //달력 버튼 css적용      $('img.ui-datepicker-trigger').css({'position':'relative','top':'5px'});     //2개 입력시 마감날짜가 시작날짜 전을 선택하지 못하게 하는 경우     onSelect: function( selectedDate ) {                 var option = this.id == "startDate" ? "minDate" : "maxDate",                     instance = $( this ).data( "datepicker" );                     date = $.datepicker.parseDate(                         instance.settings.dateFormat ||                         $.datepicker._defaults.dateFormat,                         selectedDate, instance.settings );                         dates.not( this ).datepicker( "option", option, date );               } 달력 크기 조절 //jquery-ui-xxx.css 파일에서 요부분을 찾아 .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } //font-size 를 원하는 크기로 요렇게 바꿔주면 된다.  //달력 팝업 사이즈를 크게 하고 싶을때는 font 크기를 크게하고 작게 하고 싶을때는 // font 크기를 작게 해주면 팝업창이 쥐똥만하게 뜬다. .ui-datepicker { width: 17em; padding: .2em .2em0; display: none; font-size: 20px;}