jquery ui datepicker 에서 공휴일 지정해서 선택 불가능하게 만들기

jquery ui 에 있는 datepicker 이용해서 달력을 생성할때 공휴일에는 선택을 불가능하게 하도록 하는 소스 입니다.
인터넷에서 찾은 소스에다가 약간의 추가를 더해서 매년 반복되는 공휴일과 한해에만 적용되는 공휴일을 구분할수 있게 해놧습니다.

소스를 보면 대충 알꺼고 리턴하는 값을 설명하면

result = [false, “date-holiday”, holiday.title];

[]안에 첫번째 값은 해당일자를 사용자가 선택 가능하게 할지 못하게 할지 여부 (true 는 가능, false는 불가능)
두번째 인자는 추가적인 css 클래스이름 .date-holiday 클래스로 글자 색이나 이런거 주면 반영됨
마지막 세번째 인자는 마우스 올렸을때의 타이틀값

jquery ui 적용해서 해당 소스 확인해보면 금방 알수 있습니다.

var holidays = {
	"0101":{type:0, title:"신정", year:""},
	"0301":{type:0, title:"삼일절", year:""},
	"0505":{type:0, title:"어린이날", year:""},
	"0606":{type:0, title:"현충일", year:""},
	"0815":{type:0, title:"광복절", year:""},
	"1003":{type:0, title:"개천절", year:""},
	"1009":{type:0, title:"한글날", year:""},
	"1225":{type:0, title:"크리스마스", year:""},

	"0209":{type:0, title:"설날", year:"2013"},
	"0210":{type:0, title:"설날", year:"2013"},
	"0211":{type:0, title:"설날", year:"2013"},
	"0918":{type:0, title:"추석", year:"2013"},
	"0919":{type:0, title:"추석", year:"2013"},
	"0920":{type:0, title:"추석", year:"2013"},
	"0517":{type:0, title:"석가탄신일", year:"2013"}
};

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']);

	$('#booking_date').datepicker({
		showOn: 'both',
		buttonImage: '<?=$g4[path]?>/img/calendar.gif',
		buttonImageOnly: true,
		buttonText: "달력",
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		yearRange: 'c-99:c+99',
		minDate: '+1d',
		beforeShowDay: function(day) {
			var result;
			// 포맷에 대해선 다음 참조(http://docs.jquery.com/UI/Datepicker/formatDate)
			var holiday = holidays[$.datepicker.formatDate("mmdd",day )];
			var thisYear = $.datepicker.formatDate("yy", day);

			// exist holiday?
			if (holiday) {
				if(thisYear == holiday.year || holiday.year == "") {
					result =  [false, "date-holiday", holiday.title];
				}
			}

			if(!result) {
				switch (day.getDay()) {
					case 0: // is sunday?
						result = [false, "date-sunday"];
						break;
					case 6: // is saturday?
						result = [true, "date-saturday"];
						break;
					default:
						result = [true, ""];
						break;
				}
			}

			return result;
		}
	});
});

위 소스를 이용한 예제는 여기를 클릭하세요.

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

  • NG

    datepicker에 공휴일을 추가할 일이 있었는데 도움이 많이 되었습니다.
    감사합니다.