jQuery UI의 Datepicker에서 월/년 선택 및 버튼 설정

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

[그림 1] 구현 하고자 하는 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();

});