캘린더 UI datepicker 기본값 설정
페이지 정보
작성자 서방님 댓글 0건 조회 121회 작성일 16-12-14 10:32본문
출처 : http://webisfree.com/blog/?titlequery=%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-ui-%EC%BA%98%EB%A6%B0%EB%8D%94-ui-datepicker-%ED%95%9C%EA%B8%80%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0--%EB%A1%9C%EC%BB%AC%EB%9D%BC%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98
제이쿼리 UI는 사용하기 편리한 다양한 UI(유저 인터페이스)를 매우 많이 지원한다. 이 중에서도 편리하면서 꼭 필요한 기능 중 하나로 datepicker를 꼽을 수 있다...
Datepicker UI는 말 그대로 날짜를 쉽게 선택할 수 있도록 도와주는 인터페이스로 사용 방법이 매우 간단하고 쉽다. 이 UI를 한글로 변경하기 위해서... 즉, 로컬라이제이션 하기위해서는 추가적인 설정이 필요한데 이 방법은 아래와 같다. 그럼 아래의 아래의 예제코드를 보자...
# datepicker 한글화 예제소스 보기
// 설정하기, kr region callendar
$.datepicker.regional['kr'] = {
closeText: '닫기', // 닫기 버튼 텍스트 변경
currentText: '오늘', // 오늘 텍스트 변경
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' // 날짜 포맷 설정
};
$.datepicker.setDefaults($.datepicker.regional['kr']);
// Datepicker UI 구동하기
$("#datepicker").datepicker();
</script>
위에서 보는바와 같이 기존의 영문 텍스트들이 모두 한글화로 변경되었다. 위에보면 몇 가지 축약 텍스트 역시 설정되어 있는데 한글은 기본적으로 텍스트 길이가 짧으므로 모든 설정에 다른 텍스트 설정이 필요한 것은 아니다.
변경된 모습은 아래처럼 확인이 가능하게 된다.
변경 전 기본 영문 캘린더
한국어 적용된 캘린더 UI 모습
위와같이 매우 간단하게 캘린더 UI에 한글이 적용되었다.
댓글목록
등록된 댓글이 없습니다.
