datepicker 달력으로만 입력 가능, 초기화 버튼, 한글 표시

입력란 생성

<td class="last">
<span class="td_type06"><input type="text" name="from_date" value="${baseMap.from_date }" class="date" onkeyup="enterkey()"/></span>
~
<span class="td_type06"><input type="text" name="to_date" value="${baseMap.to_date }" class="date" onkeyup="enterkey()"/></span>
</td>

 

초기화 버튼 및  한글 표시, 해당 input type 속성을 readonly로 설정하기 위해 브라우저를 실행하자 마자 아래 코드 동작

$(function() {

	window.onload = function cleanDatepicker(){
		//alert('aaaa');
        // clear 버튼 생성
	     var old_fn = $.datepicker._updateDatepicker;

		 $.datepicker._updateDatepicker = function(inst) {
		   old_fn.call(this, inst);

		   var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");

		   $("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>clear</button>").appendTo(buttonPane).click(function(ev) {
		    $.datepicker._clearDate(inst.input);
		   }) ;
		}
		
        // 한글 표시
		$.datepicker.setDefaults({
		        dateFormat: 'yymmdd',
		        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: '년'
		});
		
        // 읽기 전용으로 변환
		$(".date").attr("readonly",true);

	}
    
    // input에 datepicker 적용
    $(".date").datepicker({
		dateFormat: 'yy-mm-dd',
		showButtonPanel: true
	});
}