jQuery datepicker 관련 옵션들

jQuery UI의 Datepicker 위젯은 input 에서 잘 사용하는데,

옵션을 정리해 두기 위하여 기록해 놓습니다.

 

자주 사용하는 옵션만 일부 정리합니다.

옵션	옵션값	설명
dateFormat	yy-mm-dd	표기할 일자 형식 변경
showOtherMonths	true/false	일자 표기 빈 공간에 이전/다음 달의 일자 표기
showMonthAfterYear	true/false	년도 먼저 나오고 뒤에 월 표기
changeYear	true/false	콤보박스에서 년도 선택
changeMonth	true/false	콤보박스에서 월 선택
showOn	focus button both	포커스가 오면 달력이 팝업 버튼을 클릭하면 달력이 팝업 위의 두가지를 모두 선택
buttonImage	이미지경로	버튼 이미지 사용
buttonImageOnly	true/false	입력 필드 옆, 버튼 안에 이미지 표기
buttonText	텍스트 입력	button에 마우스를 올렸을때 표시되는 텍스트
yearSuffix	텍스트 입력	달력의 년도 부분 뒤에 붙는 텍스트
monthNamesShort		달력의 월부분 텍스트 ['1', '2', '3', '4', '5'...]
monthNames		달력의 월 부분 tooltip text ['1월', '2월', '3월', '4월', '5월'...]
dayNamesMin		달력의 요일 부분 텍스트 ['일', '월', '화', '수', '목', '금', '토']
dayNames		달력의 요일 부분 tooltip text ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
minDate	-1D	최소 선택일자 ( -1D : 하루전/ -1M : 한달전/ -1Y : 1년전 )
maxDate	+1D	최대 선택일자 ( +1D : 하루후/ +1M : 한달후/ +1Y : 1년후)
showWeek	true/false	달력에 몇주 째인지 표기

 

필요한 부분만 페이지의 header 부분에 삽입하여 사용하면 됩니다.

<script type='text/javascript'>
	$(function () {
    	$('.datepicker').datepicker({
        	showOn : 'focus',
            dateFormat : 'yy-mm-dd',
            changeMonth : true,
            changeYear : true,
            yearRange : 'c-30:c+30',
            currentText : 'Today',
        });
    });
</script>