나의 개발 노트

jquery datepicker를 이용해서 년월만 선택하고 싶을 때가 있다.
이때 유용하게 사용할 수 있는 방법이다.
활용성을 높이기 위해 공통 js파일에 show_calendar_month라는 Function을 정의해서 사용했다. 이렇게 이용을 하면 사용하고자 하는 페이지에서 보다 유연하게 사용할 수 있다.
input 파라미터로는 선택한 년월을 표기할 textbox의 id를 넣어 주면 된다.
년월 picker 기능은 모두 Function에 정의해 두고 호출만 하면 된다.

function show_calendar_month(obj) {
	$("#" + obj).datepicker({
		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월" ],
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        onChangeMonthYear: function (year, month, inst) {
        	$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    	},
        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('setDate', new Date(year, month, 1));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
    
    $("#" + obj).focus(function () {
        $(".ui-datepicker-calendar").hide();
    });
    
    $('#' + obj).datepicker('show');
}

이렇게 정의한 Function을 html/jsp 파일에서 아래와 같이 호출만 하면 된다.

...
<td class="c" width="250px">
	<input type=text id="Fdate1" name="Fdate1" value='<cnsone:date value="${Fdate1}"/>' readonly style="width:70px;text-align:center;">
	<input type='button' onClick="show_calendar_month('Fdate1');" style="background:url(${WEBROOT}/images/icon/calendar.gif);border:0;width:16px;height:18px;cursor:hand;vertical-align:middle;">
</td>
...

스타일 시트를 추가해서 기존에 보이던 일자를 보이지 않도록 처리한다.
<style>
table.ui-datepicker-calendar { display:none; }
</style>
달력 아이콘 버튼을 클릭하면 아래의 이미지와 같이 년월 picker의 모습을 보게 된다.
년과 월만을 선택하는 UI를 datepicker를 이용해서 간단하게 만들 수 있다.

jQuery UI의 Datepicker를 아래의 이미지와 같이 설정한다.

$('#workMfgDate').datepicker({

    dateFormat: "yy.mm.dd",

    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월" ],
    dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
    firstDay: 1, 
    changeYear: true,
    changeMonth:true,
    showButtonPanel: true,
    gotoCurrent: true,
    closeText: "Clear",
    currentText: "오늘",
    showOn: "both",

    buttonImage: "./images/icon/monthlycalendar.png",

    buttonImageOnly: true

});

monthNames와 monthNamesShort 에 한글로 1~12월 까지의 명칭을 표기하도록 설정한다.
firstDay가 1이면 월요일, 0 이면  일요일 시작요일이 된다.
changeYear값이 true 이면 년을 선택할 수 있는 콤보박스가 제공된다.
changeMonth값이 true 이면 월을 선택할 수 있는 콤보박스가 제공된다.
showButtonPanel 값을 true로 하면 달력의 아래 부분에 Today/Close 버튼이 나타난다.
closeText는 Close버튼의 명칭을 말하며, 버튼의 명칭을 Clear로 변경하고 클릭 시 선택한 날짜 값을 지우고 달력을 숨기도록 바인딩 할 예정이다.
currentText는 Today버튼의 명칭을 오늘로 바꾸고 오늘 일자를 설정하고 달력을 숨기도록 바인딩 할 예정이다.
showOn 값을 both로 하게 되면 input 과 Image button 둘 다 사용할 수 있으며, button으로 설정할 경우 Image button을 클릭했을 때만 달력이 나타나게 된다.

buttonImage는 input 옆에 생기는 버튼에 아이콘을 추가할 수 있다.
buttonImageOnly 값이 true이면 버튼의 테두리는 제공되지 않고 이미지만 표시되며, false일 경우 버튼 위에 이미지가 있게 된다.

html 문서의 input type 설정 부분

<input type="text" id="workMfgDate" name="workMfgDate" readonly style="width:80px;text-align:center;">

jQuery UI Datepicker에서 showButtonPanel 값을 true로 설정을 했지만, Today 버튼을 클릭해도 아무런 반응이 없다.

따라서 오늘 날짜를 적용하고 창을 닫는 동작을 할 수 있도록 jQuery 바인딩 코드를 작성해야 한다.

오늘(Today) 버튼 클릭 시 오늘 날짜를 적용하고 창을 닫는다.

$('button.ui-datepicker-current').live('click', function() {

    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();

});

Close(Clear) 버튼 클릭 시 값을 지우고 창을 닫는다.

$('button.ui-datepicker-close').live('click', function() {

    $.datepicker._curInst.input.datepicker('setDate', '').datepicker('hide').blur();

});