jQuery 달력(datepicker) 특정날짜 비활성화(disable) 시키기 | Client Side

많이들 사용하시는 jQuery 달력입니다.


달력사용할때 특정 날짜를 비활성화 한다던가 아니면..

특정날짜만 사용하게 하는등 그런 부분이 필요할때 사용하는 법입니다.


우선 기본적으로 jquery파일은 기본이고 ui 파일도 다운받아야 합니다.

싸이트 http://jqueryui.com/download/all/ 에 가면 받을수 있습니다.


사용법



jQuery(function($){
	
	/*
	//config 값을 json형식으로 만든후 setDefaults로 설정할수도 있음.
	
	$.datepicker.regional['ko'] = {closeText: '닫기',dayNamesShort: ['일','월','화','수','목','금','토']};
	$.datepicker.setDefaults($.datepicker.regional['ko']);
	*/
	
	$(".calander").datepicker({
		changeMonth:true,
		changeYear:true,
		yearRange:"1900:2014",
		showOn:"both",
		buttonImage:"../img/ico/calendar.gif",
		buttonImageOnly:true,
		dateFormat: 'yy-mm-dd',
		showOtherMonths: true,
		selectOtherMonths: true,
		showMonthAfterYear: true,
		dayNamesMin: ['일','월', '화', '수', '목', '금', '토'],
		monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
		nextText: '다음 달',
		prevText: '이전 달',
		beforeShowDay: disableAllTheseDays	
	});
	
});

// 특정날짜들 배열
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];
}



핵심은 beforeShowDay 이부분.


jquery-ui,jquery 달력,달력,datepicker
Comment Write
Comment List
등록된 코멘트가 없습니다.