[JS] jQuery UI datepicker API (날짜선택기) 구현 방법

datepicker (날짜선택기)

 jQuery에서 제공하는 위젯 중 하나이며, 날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할

jquery UI 공식사이트에 올라온 API를 사용

 

https://jqueryui.com

jQuery UI

 

 

기본 설정 

이미 기존에 사용되고 있는 사이트에서 jQuery UI 의 모든 기능을 다운 받아서 사용하면 다른 css나 js와 충돌이 날 가능성이 있음

따라서 원하는 부분만 설정해서 다운로드! 

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

// 데이트피커 2개를 출력
날짜1 : <input type="text" id="datepicker">
날짜2 : <input type="text" id="datepicker2">

 

 

script단의 datepicker 이용하여 기본적인 datepicker UI를 불러올 수 있음 

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

//날짜1의 초기값을 오늘 날짜로 설정
$('#datepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
//날짜2의 초기값을 내일로 설정
$('#datepicker2').datepicker('setDate', '+1D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

 

 

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

 $(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: "-1Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
                ,maxDate: "+1Y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)                    
            });

datepicker를 응용해서 구현 가능한 여러 가지 옵션 

 

css - 데이트피커 버튼 롤오버 시 손가락 모양 표시 

/*datepicer 버튼 롤오버 시 손가락 모양 표시*/
.ui-datepicker-trigger{cursor: pointer;}
/*datepicer input 롤오버 시 손가락 모양 표시*/
.hasDatepicker{cursor: pointer;}

 

 

구현 화면