[jquery] datepicker 한글 설정

1. 개요

jquery-ui API 중 달력 기능 사용에 있어 기본 영문 언어에서 한글로 변경하는 방법에 대해 포스팅 합니다.

 

2. API

상세한 API 사용은 원 출처 페이지를 참고하기 바랍니다.

https://jqueryui.com/datepicker/

3. 한글 설정

<script>
if(typeof $.datepicker.regional == 'object') {
	$.datepicker.regional['kr'] = {
	    closeText: '닫기', // 닫기 버튼 텍스트 변경
	    currentText: '오늘', // 오늘 텍스트 변경
	    changeYear: true,
	    changeMonth: false,
	    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: ['월','화','수','목','금','토','일'], // 요일 최소 축약 텍스트 설정
	    dateFormat: 'dd/mm/yy' // 날짜 포맷 설정
	};

	// Seeting up default language, Korean
	$.datepicker.setDefaults($.datepicker.regional['kr']);
}
</script>

datepicker 호출하기 직전에 위의 소스가 먼저 호출되면 됩니다.

<script>
$("#date_popup").datepicker({
			dateFormat:'yy-mm-dd',
			showOn: "button",
			buttonImage: 'btn_calendar.gif',
			buttonImageOnly: true,
			buttonText: "Select date"
		});
</script>

<input type="text" id="date_popup" name="select_date" style="color:#787878;" onkeypress="checkInputTime(event);" onfocus="blur();" />

 

 

 

4. 출처

https://jqueryui.com/