jQuery - datepicker 달력구현

jQuery 기능중 하나인 datepicker는 달력을 출력하고 선택한 날짜를 입력폼에 넣어주는 기능을 합니다. 경우에 따라 달력의 디자인을 바꿀 수도 있고 날짜제한등의 기능을 넣을 수 도 있습니다.

사용법

datepicker를 사용하기 위해서는 jQuery를 플러그인 할 필요가 있는데  

<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" id="date">
    
<script>
    $("#date").datepicker();
</script>

이런식으로 연결을 하면 달력을 사용할 수 있습니다.

 

추가로 datepicker에는 여러가지 속성이 있습니다.

$("#date").datepicker({
	dateFormat: 'yy-mm-dd' //달력에서 선택하고 나오는 날짜 형태
  	,showOtherMonths: true //현재 월에서 앞뒤월의 날짜를 표시
  	,showMonthAfterYear:true //년 - 월 표시
  	,changeYear: true //년 선택 
  	,changeMonth: true //월 선택                 
  	,showOn: "both" //버튼을 누르거나 input을 클릭하면 달력 표시  
  	,buttonImage: "<이미지 링크>" //버튼 이미지 경로
  	,buttonImageOnly: true //기본 버튼의 색을 없애고, 이미지만 보이게 하는 설정
  	,buttonText: "선택" //버튼에 마우스 오버시 표시되는 텍스트                
  	,yearSuffix: "년" //년도 뒤에 붙는 텍스트
  	,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //월 부분 텍스트
  	,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //월 부분 Tooltip 텍스트
  	,dayNamesMin: ['일','월','화','수','목','금','토'] //요일 부분 텍스트
  	,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //요일 부분 Tooltip 텍스트
  	,minDate: "-1M" //최소 선택일자(0:당일, -1D:하루전, -1M:한달전, -1Y:일년전)
  	,maxDate: "+1M" //최대 선택일자(0:당일, +1D:하루후, -1M:한달후, -1Y:일년후)               
});

 

위의 datepicker달력은 디자인 적용한 달력입니다, 다음 포스팅할 글에서는 datepicker의 디자인을 바꾸는 방법에 대해 알려드리겠습니다.