[jquery] datepicker 특정일만 선택

<script>

	// 선택가능 날짜
	var availableDates = ["2021-10-28", "2021-10-29", "2021-11-03"];

	// 특정제한 날짜
	var disabledDays = ["2021-10-28", "2021-10-29", "2021-11-3", "2021-11-13"];

	function available(date) {

		var thismonth = date.getMonth()+1;
		var thisday = date.getDate();

		if(thismonth<10){
			thismonth = "0"+thismonth;
		}

		if(thisday<10){
			thisday = "0"+thisday;
		}

		ymd = date.getFullYear() + "-" + thismonth + "-" + thisday;

		if ($.inArray(ymd, availableDates) >= 0) {
			return [true,"",""];
		} else {
			return [false,"",""];
		}
	}

	// 특정일 선택막기
	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];
	}


	$.datepicker.setDefaults({
		dateFormat: 'yy-mm-dd',
		//	minDate: '-7',	// 일주일 이전 날짜 선택 못하게
		//	maxDate: '1',	// 하루 이후 날짜 선택 못하게

		beforeShowDay: available,	// 선택가능
		//beforeShowDay: disableAllTheseDays, // 선택제한	( 날짜 선택시 주의 )

		prevText: '이전 달',
		nextText: '다음 달',
		monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
		monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
		dayNames: ['일', '월', '화', '수', '목', '금', '토'],
		dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
		dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
		showMonthAfterYear: true,
		yearSuffix: '년',

		showOn: 'both', //	button,both : "button" ->button 클릭 시 날짜 위젯을 보여준다. "both" => button이나 text상자 클릭 시 날짜 위젯을 보여준다.
		buttonImage: 'images/calendar_ico.png',  // 우측 달력 icon 의 이미지 패스
		buttonImageOnly: true, // true이면 입력 필드 옆에 이미지만 표시됩니다. false이면 버튼 안에 이미지가 표시됩니다. inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)

		// 년 또는 월이 변경시 이벤트 발생
		onChangeMonthYear: function (year, month, inst) {
			// alert('년 또는 월이 변경시 이벤트 발생');
		},

		// 일자 선택되기전 이벤트 발생
		beforeShow: function (input, inst) {
			// alert('일자 선택되기전 이벤트 발생');
		},

		// 일자 선택된 후 이벤트 발생
		onSelect: function (dateText, inst) {
			// alert('일자 선택된 후 이벤트 발생');

			alert(dateText);
		}

	});

	$(function() {
		$("#datepicker1").datepicker();
	});




</script>

// 주말(토,일)만 선택 안하기
beforeShowDay: function(date){
	var day = date.getDay();
	return [(day != 0 && day != 6)];
}

// 매주 화요일, 금요일만 선택하기
beforeShowDay: function(date){
	var day = date.getDay();
	return [(day != 0 && day != 1 && day != 3 && day != 4 && day != 6)];

},

// 특정제한 날짜
var disabledDays = ["2021-10-28", "2021-10-29", "2021-11-3", "2021-11-13"];

// 특정일 선택막기
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];
}

※. 주의 선택가능 날짜 선택하기와 다르게 날짜가 10일 이전일때 2021-11-3 이면 2021-11-03 으로 하면 안됨

 

스킨테마

https://jqueryui.com/themeroller/

ThemeRoller | jQuery UI