[jQuery UI] Datepicker / 날짜 선택, 달력선택기 사용법 및 옵션

오늘은 jquery ui의 datepicker 사용법에 대해 알려드리겠습니다.

 

1.

<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>

가장 먼저 head에 링크를 넣어줍니다.

 

다운로드하여서 적용할 경우에는 (https://jqueryui.com/download/)로 가서 다운로드하시면 됩니다.

 

2.

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

datepicker가 될 input을 작성해 줍니다.

 

3.

$(function() {
    $( "#Date" ).datepicker({
    });
});

가장 기본의 스크립트를 추가해줍니다. 해당 input의 id 혹은 class를 작성하면 됩니다.

 

 

 

실행화면

 

datepicker 옵션

 $("#Date").datepicker({

  showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.

  buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지

  buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.

  changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다.

  changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.

  minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.

  nextText: '다음 달', // next 아이콘의 툴팁.

  prevText: '이전 달', // prev 아이콘의 툴팁.

  numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

  stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. 

  yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.

  showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. 

  currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널

  closeText: '닫기',  // 닫기 버튼 패널

  dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식.

  showAnim: "slide", //애니메이션을 적용한다.

  showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. 

  dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.

  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.

  yearRange: "2010:2013" //연도 범위

 });

 

 

 

datepicker 시작일 ~ 종료일 설정 방법

 

<script type="text/javascript">
    $(document).ready(function () {
            $.datepicker.setDefaults($.datepicker.regional['ko']); 
            $( "#startDate" ).datepicker({
                 changeMonth: true, 
                 changeYear: true,
                 nextText: '다음 달',
                 prevText: '이전 달', 
                 dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
                 dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], 
                 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월'],
                 dateFormat: "yymmdd",
                 maxDate: 0,                       // 선택할수있는 최소날짜, ( 0 : 오늘 이후 날짜 선택 불가)
                 onClose: function( selectedDate ) {    
                      //시작일(startDate) datepicker가 닫힐때
                      //종료일(endDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
                     $("#endDate").datepicker( "option", "minDate", selectedDate );
                 }    
 
            });
            $( "#endDate" ).datepicker({
                 changeMonth: true, 
                 changeYear: true,
                 nextText: '다음 달',
                 prevText: '이전 달', 
                 dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
                 dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], 
                 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월'],
                 dateFormat: "yymmdd",
                 maxDate: 0,                       // 선택할수있는 최대날짜, ( 0 : 오늘 이후 날짜 선택 불가)
                 onClose: function( selectedDate ) {    
                     // 종료일(endDate) datepicker가 닫힐때
                     // 시작일(startDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 시작일로 지정
                     $("#startDate").datepicker( "option", "maxDate", selectedDate );
                 }    
 
            });    
    });
</script>