날짜 컨트롤들을 지역화하여 한글 형태로 다루기 위해 먼저 datepicker 의 기본 옵션값을 세팅해 둔 후 주말(토,일요일), 일요일, 이전 날짜, 특정 날짜들을 return 하는 함수들도 선언해 둡니다.
disabledDays 라는 배열변수에는 임의로 “2013-7-9”, “2013-7-24”, “2013-7-26” 와 같이 3개의 날짜를 듬성듬성 심어놓았습니다.
각 입력폼에 datepicker 를 호출하면서 beforeShowDay 라는 옵션값에 가져오는 값에 따라 특정날짜들이 disable 됩니다.
jQuery(function($){ $.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: ''}; $.datepicker.setDefaults($.datepicker.regional['ko']); $('#date1').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate: '+1y',beforeShowDay: disableAllTheseDays }); $('#date2').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate: '+1y',beforeShowDay: noBefore }); $('#date3').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate: '+1y',beforeShowDay: noWeekendsOrHolidays }); $('#date4').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear: true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate: '+1y',beforeShowDay: noSundays }); }); // 특정날짜들 배열 var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"]; // 주말(토, 일요일) 선택 막기 function noWeekendsOrHolidays(date) { var noWeekend = jQuery.datepicker.noWeekends(date); return noWeekend[0] ? [true] : noWeekend; } // 일요일만 선택 막기 function noSundays(date) { return [date.getDay() != 0, '']; } // 이전 날짜들은 선택막기 function noBefore(date){ if (date < new Date()) return [false]; return [true]; } // 특정일 선택막기 function disableAllTheseDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); for (i = 0; i < disabledDays.length; i++) { if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) { return [false]; } } return [true]; }