[jQuery] 날짜선택 플러그인 DatePicker 옵션

 

날짜 선택 시 유용하게 사용 가능한 Jquery플러그인 Datepicker 

https://jqueryui.com/datepicker/

Datepicker | jQuery UI

 

 

Datepicker 기본코드

DatePicker 기본 코드는 아래와 같다.

jquery코드 로드해주고, datepicker css파일, js파일을 넣어주면 된다.

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

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

 

 

 

 

 

 

 

Datepicker 옵션

Datepicker에는 다양한 옵션들이 있어서 필요한 경우 적용해서 사용하면 된다.

option	value	설명
minDate	-1Y : 일년전 -1M : 한달전 -1D : 하루전 0 : 오늘부터	최소로 가능한 선택 일자를 지정
max Date	0 : 오늘까지 +1D : 하루후 +1M : 한달후 +1Y : 일년후	최대로 가능한 선택 일자를 지정
changeYear	true, false	연도 변경 가능한 셀렉트박스 표시
changeMonth	true, false	월 변경 가능한 셀렉트 박스 표시 여부
dateFormat	yy-mm-dd	데이터 표시 형식 지정
showButtonPanel	true, false	오늘, 닫기 버튼 활성화 여부
yearRange	2010:2020 또는 c-10:c+10	연도 범위를 지정 * 2010:2020 => 2010년부터 2020년 까지 보여줌 * c-10:c+10 => 현재 연도로부터 10년전부터 10년후까지 보여줌
showWeek	true, false	주차 표시 여부
showButtonPanel	true	캘린더 하단에 버튼 패널을 표시한다.
stepMonths	3	next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가.
buttonImageOnly	true	버튼에 있는 이미지만 표시한다.
buttonImage	이미지경로	버튼이이미지
showOn	both	버튼과 텍스트 필드 모두 캘린더를 보여준다.
showAnim	show(기본), slide, fade in, blind, bounce, clip, drop fold, none	달력 창 나올 때 애니메이션을 적용
showMonthAfterYear	true, false	월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다.
numberOfMonths	[1,1]	한번에 얼마나 많은 월을 표시할것인가. 예) [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

 

한글 표기 변경 옵션

option	value	설명
dayNamesMin	['월', '화', '수', '목', '금', '토', '일']	요일 한글로 변경
monthNamesShort	['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']	월 한글 변경
closeText	닫기	닫기 버튼 텍스트 변경
currentText	오늘	오늘 날짜로 이동하는 버튼 텍스트 변경
nextText	다음 달	next 버튼 텍스트
prevText	이전 달	prev 버튼 텍스트 변경

 

한글로 변경하는 것은 https://hongpage.kr/13 에 더 자세히 포스팅하였다.

 

 

 

 

옵션 적용 예시

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

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