jQuery UI 날짜선택기 datepicker

jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서가 있다.

 

기본 설정 

Jquery UI를 사용하는데 필요한 js파일과 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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 

input객체를 datepicker로 선언

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

script단의 datepicker를 사용하겠다는 선언

 $("#datepicker").datepicker();

을 이용하여 기본적인 datepicker UI를 불러올 수 있다.

 

--datepicker옵션추가--

script 단에 datepicker의 옵션을 추가하게 되면 여러가지 기능을 가진 datepicker UI를 사용할 수 있다.

 

  <script>
        $(function() {
            //input을 datepicker로 선언
            $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd' //Input Display Format 변경
                ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
                ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
                ,changeYear: true //콤보박스에서 년 선택 가능
                ,changeMonth: true //콤보박스에서 월 선택 가능                
                ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
                ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
                ,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" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
                ,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)                
            });                    
            
            //초기값을 오늘 날짜로 설정
            $('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)            
        });
    </script>

 

프로젝트 내의 모든 datepicker에 대한 옵션을 설정할 경우

 $(function() {
            //모든 datepicker에 대한 공통 옵션 설정
            $.datepicker.setDefaults({
                dateFormat: 'yy-mm-dd' //Input Display Format 변경
                ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
                ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
                ,changeYear: true //콤보박스에서 년 선택 가능
                ,changeMonth: true //콤보박스에서 월 선택 가능                
                ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
                ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
                ,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" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
                ,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)                    
            });
 
            //input을 datepicker로 선언
            $("#datepicker").datepicker();                    
            $("#datepicker2").datepicker();
            
            //From의 초기값을 오늘 날짜로 설정
            $('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
            //To의 초기값을 내일로 설정
            $('#datepicker2').datepicker('setDate', '+1D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
        });

 

각 옵션별 세부내용

 

dateFormat 

input의 displayFormat을 변경해주는 옵션이다.

기본값은 DD/MM/YYYY 형태인데 우리나라에서 자주 사용되는 형태가 아니다.

아래와 같이 변경하면 YYYY-MM-DD 형태가 된다.

$.datepicker.setDefaults({dateFormat : 'yyyy-mm-dd"})

showOtherMonths

$.datepicker.setDefaults({ showOtherMonths : true })

달력의 빈 공간에 전달과 다음달의 날짜를 표시 

 

showMonthAfterYear

달력의 위쪽에 년도보다 월이 먼저 표시가 되는데 true로 변경시 월보다 년도가 먼저 표시되게 된다.

(ex : May 2019 -> 2019 May)

$.datepicker.setDefaults({ showMonthAfterYear : true })

 

changeYear , changeMonth

선택해야 하는 날짜의 범위가 넓을 때 앞뒤 화살표가 아니라 콤보박스로 간편하게 년도와 월을 선택할 수 있도록 해주는 옵션이다.

$.datepicker.setDefaults({ changeYear : true , changeMonth : true});

 

showOn 

기본값은 input 옆에 버튼이 없다. input을 클릭해야 달력이 표시된다.

이 옵션의 값을 "button"이나 "both"로 설정하면 input옆에 버튼이 표시된다.

"button"은 버튼을 클릭하면 달력이 표시되고, input에 직접 값을 입력할 수 있다.

"both"는 input을 클릭해도 달력이 표시된다.

예외처리등을 줄일려면 "both"를 선택하는게 간편할듯하다.

 

$.datepicker.setDefaults({
    showOn: "button" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시      
});
 
$.datepicker.setDefaults({
    showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시      
});

 

buttonImage, buttonImageOnly , buttonText

showOn이 "both"이거나 "button"일 경우에만 의미있는 옵션들이다.

$.datepicker.setDefaults({
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
    ,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
    ,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트      
});

 

yearSuffix

기본값은 달역의 년도가 2019과 같이 숫자로만 표현된다.

아래와 같이 옵션을 주면 2019년과 같이 년도 뒤에 올 텍스트를 추가할 수 있다.

$.datepicker.setDefaults({
    yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
});

 

monthnamesShort , monthNames , dayNamesMin, daynames

기본값은 달력의 월과 요일 전보가 영문으로 표시된다.

아래와 같이 한글로 직접 입력해서 월과 요일을 한글과 숫자로 표현할 수 있다.

$.datepicker.setDefaults({
    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 , maxDate

이 옵션은 minDate의 날짜와 maxDate의 날짜 사이만 선택 할 수 있오록 한다.

$.datepicker.setDefaults({
    minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
    ,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)    
});