[jQuery] Datepicker 한글로 바꾸기, 선택 날짜 범위 지정

 

 

Datepicker 기본 코드

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<input type="text" id="datepicker">

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>

결과

위와 같이 기본 텍스트들이 영어로 표기된다.

 

이 영문으로 표기된 datepicker를 한글로 바꿔보자!

 

한글로 변경 (모든 input에 적용)

스크립트 부분을 아래와 같이 적용하면 웹사이트 내에 사용되는 모든 datepicker에 한글이 적용된다.

<script>
$(document).ready(function(){               
    $.datepicker.setDefaults({
    closeText: "닫기",
    currentText: "오늘",
    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: ['일', '월', '화', '수', '목', '금', '토'],
    weekHeader: "주",
    yearSuffix: '년'
    });    
 });
</script>

 

 

특정 인풋 클릭시에만 datepicker를 한글로 변경하고 싶다면 아래와 같이 인풋 아이디( #datepicker )를 지정하는 방식으로 하면 되지만, 굳이 그럴 이유가 있을까 싶다.

<script>
$(function() {
    $( "#datepicker" ).datepicker({
    closeText: "닫기",
    currentText: "오늘",
    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: ['일', '월', '화', '수', '목', '금', '토'],
    weekHeader: "주",
    yearSuffix: '년'
    });
});
</script>

 

선택 날짜 범위 지정하기

option	value	설명
minDate	-1D : 하루전 -1M : 한달전 -1Y : 일년전 0 : 오늘부터	최소로 가능한 선택 일자를 지정
max Date	0 : 오늘까지 +1D : 하루후 -1M : 한달후 -1Y : 일년후	최대로 가능한 선택 일자를 지정

코드 예시

 $("#date1").datepicker({ 
   minDate: "0",
   maxDate: "+1Y", 
 });

예시처럼 적용하면 오늘부터 1년 후의 범위 내에 있는 날짜만 선택이 가능하다.

 

 

그 외 옵션들

option	value	설명
changeYear	true, false	셀렉트박스로 연도 변경 가능 여부
changeMonth	true, false	셀렉트박스로 월 변경 가능 여부
dateFormat	yy-mm-dd	데이터 표시 형식 지정
showButtonPanel	true, falsetrue	오늘, 닫기 버튼 활성화 여부
yearRange	2010:2020	연도 범위를 지정
showWeek	true, false	주차 표시 여부

 

내용은 계속적으로 업데이트할 예정입니다.

 

 

 

원문사이트 : jqueryui.com/datepicker