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.

  • Pingback: jquery datepicker 달력에서 년도와 월만 선택 가능하게 하기 | 웹마짱구's 블로그()

  • 김성환

    잘보고 갑니다~!
    저 궁금한게 있는데 $.datepicker.regional[‘ko’] 에서 마지막 줄에 yearRange: ‘c-99:c+99’, <- 이 콤마요
    여기서 오류가 나는데 혹시 다른 옵션이 저 아래 더 있었던 건가요?~

    • 하하 오타인거 같네요. 다른 옵션은 아마 없을꺼에요 ^^ 저것만으로도 한글로 표현하기에는 충분 합니다. ^^

  • 후덜덜

    위처럼 사용하게 되면 datePicker 가 열리면서 기본으로 date가 들어가 있게 되는데요.
    선택 버튼을 누르지 않게 될경우에 input 창에 date가 안나오게 하는방법은 어떻게 있을까요 ??

    • input 에서 기본 value 를 비워두시면 최초 로딩시에 비어있는 상태로 출력이 됩니다. 그다음에 datePicker 가 열리고 나서 선택 하거나 창을 닫으면 데이터가 입력이 됩니다.

      만약에 default value 값이 비어있는 것을 원하시면 onClose 부분에 해당 처리를 추가 하시면 될 것 같습니다.

    • 답변 드리고 몇가지 테스트를 해보았는데요. default value 를 비우는거 말고 창을 열었다가 닫을때에 대한 이벤트가 동일하게 onClose 를 통해서 이루어 지기 때문에 버튼클릭과 그외 창을 닫는 방식에 대한 별도 처리가 어려울듯 하네요.
      이부분은 혹시 해결하신다면 공유 부탁드릴께요 ^^