|
language/jquery 2013. 9. 11. 17:34
원본 링크 http://nampoong.tistory.com/75
날짜 입력폼과 관계된 데이터 컨트롤시 jquery-ui 에서 제공하는 datepicker를 많이 이용하는데요. 오늘은 시작일과 종료일의 범위를 두고 그사이의 특정날짜들을 일부 제거해야하는 형태의 프로그램작업이 있어 작업한걸 공개해봅니다.
일단 먼저 아래와 같이 기본적으로 필요한 jquery와 jquery-ui를 불러옵니다. jquery.com CDN 을 이용했습니다.
날짜컨트롤들을 지역화하여 한글형태로 다루기 위해 먼저 datepicker 의 기본옵션값을 세팅해둔후 주말(토,일요일), 일요일, 이전날짜, 특정날짜들을 return 하는 함수들도 선언해 둡니다. disabledDays 라는 배열변수에는 임의로 "2013-7-9", "2013-7-24", "2013-7-26" 와 같이 3개의 날짜를 듬성듬성 심어놓았습니다. 각 입력폼에 datepicker 를 호출하면서 beforeShowDay 라는 옵션값에 가져오는 값에 따라 특정날짜들이 disable 됩니다.
02 | $.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: '' }; |
03 | $.datepicker.setDefaults($.datepicker.regional[ 'ko' ]); |
04 | $( '#date1' ).datepicker({showOn: 'both' ,buttonText: "달력" ,changeMonth: true ,changeYear: true ,showButtonPanel: true ,yearRange: 'c-99:c+99' ,constrainInput: true ,maxDate: '+1y' ,beforeShowDay: disableAllTheseDays }); |
05 | $( '#date2' ).datepicker({showOn: 'both' ,buttonText: "달력" ,changeMonth: true ,changeYear: true ,showButtonPanel: true ,yearRange: 'c-99:c+99' ,constrainInput: true ,maxDate: '+1y' ,beforeShowDay: noBefore }); |
06 | $( '#date3' ).datepicker({showOn: 'both' ,buttonText: "달력" ,changeMonth: true ,changeYear: true ,showButtonPanel: true ,yearRange: 'c-99:c+99' ,constrainInput: true ,maxDate: '+1y' ,beforeShowDay: noWeekendsOrHolidays }); |
07 | $( '#date4' ).datepicker({showOn: 'both' ,buttonText: "달력" ,changeMonth: true ,changeYear: true ,showButtonPanel: true ,yearRange: 'c-99:c+99' ,constrainInput: true ,maxDate: '+1y' ,beforeShowDay: noSundays }); |
11 | var disabledDays = [ "2013-7-9" , "2013-7-24" , "2013-7-26" ]; |
14 | function noWeekendsOrHolidays(date) { |
15 | var noWeekend = jQuery.datepicker.noWeekends(date); |
16 | return noWeekend[0] ? [ true ] : noWeekend; |
20 | function noSundays(date) { |
21 | return [date.getDay() != 0, '' ]; |
25 | function noBefore(date){ |
26 | if (date < new Date()) |
32 | function disableAllTheseDays(date) { |
33 | var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); |
34 | for (i = 0; i < disabledDays.length; i++) { |
35 | if ($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) { |
위 소스상의 내용은 아래 입력폼에서 테스트 해볼수 있습니다.
특정일 비활성화 :
이전날짜 비활성화 :
주말(토,일) 비활성화 :
일요일만 비활성화 :
특정날짜와 주말을 비활성화한다던지 토요일만 비활성화 한다던지.. 국경일,명절 날짜데이터를 수집해서 비활성화 한다던지 여러가지로 응용해서 만들어 볼수도 있겠습니다~~~ ^^
참고 url :
http://api.jqueryui.com/datepicker/
http://davidwalsh.name/jquery-datepicker-disable-days
|