jquery datepicker 달력에서 년도와 월만 선택 가능하게 하기

jquery datepicker 를 이용하여 인터페이스를 제공하다 보면 가끔 년과 월만 선택하게 하도록 하고 싶을 때가 있습니다. 이럴경우 이용하기에 좋은 방법 입니다.

아래 소스를 참고 하세요. 예제는 여기를 확인하세요.

$(document).ready(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: '',
		showOn: 'both',
		buttonText: "달력",
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		yearRange: 'c-99:c+99'
	};
	$.datepicker.setDefaults($.datepicker.regional['ko']);

	var datepicker_default = {
		showOn: 'both',
		buttonText: "달력",
		currentText: "이번달",
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		yearRange: 'c-99:c+99',
		showOtherMonths: true,
		selectOtherMonths: true
	}

	datepicker_default.closeText = "선택";
	datepicker_default.dateFormat = "yy-mm";
	datepicker_default.onClose = function (dateText, inst) {
		var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
		var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
		$(this).datepicker( "option", "defaultDate", new Date(year, month, 1) );
		$(this).datepicker('setDate', new Date(year, month, 1));
	}

	datepicker_default.beforeShow = function () {
		var selectDate = $("#sdate").val().split("-");
		var year = Number(selectDate[0]);
		var month = Number(selectDate[1]) - 1;
		$(this).datepicker( "option", "defaultDate", new Date(year, month, 1) );
	}

	$("#sdate").datepicker(datepicker_default);
});

스타일 시트를 추가 하여 기존에 보이던 일자를 보이지 않도록 해주어야 완벽하게 적용이 됩니다.

table.ui-datepicker-calendar { display:none; }

설명이 이해가 잘 안되면 예제를 확인하세요!

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