jQuery UI Datepicker에 공휴일을 넣어보자!!


//datepicker 기본 설정에 추가
$.datepicker.setDefaults({
beforeShowDay : nationalDays //달력이 보이기 전에 nationalDays 함수 실행
});


//음력을 계산해서 배열을 만들거나 아니면 수동입력~~
var natDays = [
[2011,1,1,'ko','신정'],
[2011,2,2,'ko','설'],[2011,2,3,'ko','설'],[2011,2,4,'ko','설'],
[2011,3,1,'ko','3.1절'],
[2011,5,5,'ko','어린이날'],[2011,5,10,'ko','석가탄신일'],
[2011,6,6,'ko','현충일'],
[2011,8,15,'ko','광복절'],
[2011,9,11,'ko','추석'],[2011,9,12,'ko','추석'],[2011,9,13,'ko','추석'],
[2011,10,3,'ko','개천절'],
[2011,12,25,'ko','크리스마스'],
[2012,1,1,'ko','신정'],[2012,1,22,'ko','설'],[2012,1,23,'ko','설'],[2012,1,24,'ko','설'],
[2012,3,1,'ko','3.1절'],
[2012,5,5,'ko','어린이날'],[2012,5,28,'ko','석가탄신일'],
[2012,6,6,'ko','현충일'],
[2012,8,15,'ko','광복절'],
[2012,9,29,'ko','추석'],[2012,9,30,'ko','추석'],
[2012,10,1,'ko','추석'],[2012,10,3,'ko','개천절'],
[2012,12,25,'ko','크리스마스']
];

//datepicker에 공휴일 표시 및 클릭 비활성화
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getFullYear() == natDays[i][0] && date.getMonth() == natDays[i][1] - 1
                    && date.getDate() == natDays[i][2]) {
return [false, natDays[i][3] + '_day',natDays[i][4]];
}
}
return [true, ''];
}

$("#datepickerTest").datepicker();


//그리고 CSS 추가해야 할 것!

<style type="text/css" media="screen">
.ko_day { text-indent : -9999px; background: #eee url(/imgs/korea.png) no-repeat center;}
</style>

댓글