JQuery Datepicker로 완벽한 날짜 입력! 이렇게 하면 쉽고 빠르다!

 

html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<input type="text" class="datepicker"/>
<input type="text" class="datepicker"/>

<script>
$(function(){
    //class명이 포함된 input 전부 날짜형태 선택이 가능하도록
    $('.datepicker').datepicker();
})
</script>

datepicker 기본

 

datepicker 옵션

옵션명	값	설명
showOn	"button"	버튼 선택 시 datepicker 팝업
	"focus"	포커스 시 datepicker 팝업
	"both"	button,focus 모두 해당되는 팝
buttonImage	"/images/datepicker.png"	외부링크 또는 경로
buttonImageOnly	true or false	버튼 이미지 표기 여부
changeYear	true or false	년을 바꿀 수 있는 select box 여부
changeMonth	true or false	월을 바꿀 수 있는 select box 여부
nextText	"다음달"	다음달 버튼의 이름
prevRext	"이전 달"	이전달 버튼의 이름
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']	달력의 월부분 toolTip 텍스트
dayNamesMin	['일','월','화','수','목','금','토']	달력의 요일 텍스트
dayNames	['일요일','월요일','화요일','수요일','목요일','금요일','토요일']	달력의 요일 toolTip 텍스트
dateFormat	"yy-mm-dd" "yyyy-mm--dd" "yy.mm.dd"	텍스트로 채워질 날짜 형식
minDate	"-1M"	-1D 하루전, -1M 한달전, -1Y 일년전
maxDate	"+1M"	+1D 하루후, +1M 한달후, +1Y 일년후
yearSuffix	"년"	달력의 년도 부분에 붙는 텍스트

 

예제1

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<input type="text" class="datepicker"/>
<input type="text" class="datepicker"/>

<script>
$(function(){
    $(".datepicker").datepicker({
        showOn: "both"
       ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" 
       ,buttonImageOnly: true
       ,changeYear: true
       ,changeMonth: true 
       ,nextText:"다음달"
       ,prevText:"이전달"
       ,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'] 
       ,dayNamesMin: ['일','월','화','수','목','금','토']
       ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일']
       ,dateFormat: 'yy-mm-dd'  
       ,minDate: "-1Y" 
       ,maxDate: "+1Y"          
       ,yearSuffix: "년"
    });     
})
</script>

결과화면