jQuery UI datepicker 한글화 하기 방법 2가지입니다.
1. 다운 받은 소스 직접 수정 하기
- jQuery UI datepicker 다운 받은 소스에서 아래 소스 코드를 이용하여 영문으로 되어 있는 부분을 한글로 변경하여 사용합니다.
2. datepicker-ko.js 파일 추가하기
- 아래 소스코드로 datepicker-ko.js 파일을 만들고 HTML에 추가하여 넣습니다.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/js/datepicker-ko.js"></script>
datepicker-ko.js 파일 내용 중 주요 사항
- dateFormat: "yy-mm-dd" : 2020-01-16 형태로 input 필드에 입력되게 합니다.
- showMonthAfterYear: true : 2020년 1월 형태로 나오게 합니다.
/* Korean initialisation for the jQuery calendar extension. */
/* Written by DaeKwon Kang (ncrash.dk@gmail.com), Edited by Genie and Myeongjin Lee. */
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "../widgets/datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}( function( datepicker ) {
datepicker.regional.ko = {
closeText: "닫기",
prevText: "이전달",
nextText: "다음달",
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: [ "일","월","화","수","목","금","토" ],
weekHeader: "주",
dateFormat: "yy-mm-dd",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "년" };
datepicker.setDefaults( datepicker.regional.ko );
return datepicker.regional.ko;
} ) );
기본 사용법
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
2020/01/14 - [유용한 활용팁] - Javascript one을 이용하여 keyup으로 ajax 한번만 호출하기
Javascript one을 이용하여 keyup으로 ajax 한번만 호출하기
프로그램에서 특정 입력 필드에서 타이핑을 치기 시작할 때 한번만 ajax 호출하는 방법입니다. $("#userName").one("keyup", function(e) { 보시는 것처럼 one을 넣어서 keyup 이벤트를 인식하게 되면 그 다음에는..
han288.tistory.com
2020/01/13 - [유용한 활용팁] - Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리
Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리
특정 시간 간격으로 생성 되어 있는 세션을 유지하는 방법입니다. 브라우저에서 자바스크립트의 setTimeout을 이용하여 타이머 셋팅을 한 후 원하는 시간이 되면 타이머를 초기화 하고 ajax로 세션 유지 처리를 하..
han288.tistory.com
Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload
브라우저의 X 표시 또는 탭 X를 통해 종료 시킬 때 자동 로그아웃 처리하는 방법입니다. 로그아웃 이외에도 특정 작업을 하실 수 있습니다. beforeunload 이벤트를 통해서 처리가 가능합니다. beforeunload 이벤트..
han288.tistory.com
2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()
JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()
JavaScript로 원하는 영역에 대해서만 출력 화면 설정하기입니다. 출력을 원하는 영역에
han288.tistory.com
2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리
JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리
form, input 태그 사용 없이 ajax 통신 시 jquery의 $.post를 이용하여 post 방식으로 데이터 전송 방법입니다. 아래는 일반적으로 사용하는 방식입니다. $.ajax({ type: 'POST', url: url, data: data, success:..
han288.tistory.com
IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass
IE(Internet Explore) 11에서 background-image 버튼 바꾸는(Change) 방법입니다. jquery로 .css로 접근시 크롬과 엣지에서 이상없이 버튼 이미지가 바뀌는데, IE11에서는 바뀌지 않는 에러에 대한 처리 방법입니..
han288.tistory.com
2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)
JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)
JavaScript(자바스크립트)에서 구분자를 이용하여 배열 만들기 // 구분자로 구성된 문자열 var str = "aa/bb/cc/dd/ee"; // 구분자(/)를 통해 나뉜 결과는 배열로 저장된다. var arr = str.split("/"); // 결과값..
han288.tistory.com
2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
JavaScript로 input 입력값에 대한 생년월일 유효성 검사하기 1. 입력값 : YYYYMMDD 2. return 값: true / false 3. 2월 29일(윤년) 체크 function isBirthday(dateStr) { var year = Number(dateStr.substr(0,4))..
han288.tistory.com
2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
JavaScript로 Input type의 날짜를 체크하는 함수들입니다. isDate 함수 날짜 형식이 맞는지 체크하는 함수입니다. 입력값 형식은 yyyymmdd, yyyy-mm-dd, yyyy/mm/dd 3가지 사용을 할 수 있습니다. function isDat..
han288.tistory.com
'유용한 활용팁' 카테고리의 다른 글
| Linux 파일 및 디렉토리에 대한 퍼미션 이해 및 chmod의 숫자의 의미 (0) | 2020.01.20 |
|---|---|
| HTML form input 크롬 autocomplete 자동완성 삭제 처리 (0) | 2020.01.17 |
| Javascript one을 이용하여 keyup으로 ajax 한번만 호출하기 (0) | 2020.01.14 |
| Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리 (0) | 2020.01.13 |
| Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload (0) | 2020.01.10 |