티스토리 뷰

Jquery UI

[Jquery UI] Datepicker 간단 사용법

꼴레뇨 2018. 5. 28. 11:24
반응형

Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고, 

실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해보았습니다. 

현재 최신 버전인 1.12.1 버전 기준입니다.


기본 설정

5~7라인에는 Jquery UI를 사용하는데 필요한 js파일과 css파일이 선언되어 있고,

13라인에는 input객체를 datepicker로 사용하겠다고 선언되어있다.

13라인이 없다면 10라인이 input은 그냥 텍스트를 입력받는 input이지만 13라인이 있다면 input을 클릭했을 때 달력이 출력되고, 날짜를 선택하면 선택한 날짜가 input에 입력된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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">
</head>
<body>
    일자: <input type="text" id="datepicker">
    
    <script>
        $("#datepicker").datepicker();
    </script>
</body>
</html>
cs


datepicker 별 옵션 설정

아래의 코드는 각 datepicker 별로 옵션을 설정하는 방법이다.

datepicker 별로 옵션이 달라야 하는 경우에만 이 방법을 사용하는 것이 좋다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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">
<style>
/*datepicer 버튼 롤오버 시 손가락 모양 표시*/
.ui-datepicker-trigger{cursor: pointer;}
/*datepicer input 롤오버 시 손가락 모양 표시*/
.hasDatepicker{cursor: pointer;}
</style>
</head>
<body>
    일자: <input type="text" id="datepicker">
 
    <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>
</body>
</html>
cs


전체 datepicker 옵션 일괄 설정

아래의 코드는 모든 datepicker에 대한 옵션을 일괄적으로 설정하는 방법이다.

한번의 설정으로 datepicker, datepicker2의 옵션을 모두 설정할 수 있다.

Tiles 프레임워크를 이용하거나 공통 js파일에 아래와 같이 옵션을 일괄적으로 설정하면 시스템의 모든 datepicker에 대한 옵션을 한곳에서 설정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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">
<style>
/*datepicer 버튼 롤오버 시 손가락 모양 표시*/
.ui-datepicker-trigger{cursor: pointer;}
/*datepicer input 롤오버 시 손가락 모양 표시*/
.hasDatepicker{cursor: pointer;}
</style>
</head>
<body>
    From: <input type="text" id="datepicker">
    To: <input type="text" id="datepicker2">
 
    <script>
        $(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:일년후)
        });
    </script>
</body>
</html>
cs



각 옵션별 세부 내용을 순서대로 자세히 살펴보도록 하겠습니다.



dateFormat

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

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

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

다른 형태가 필요하다면 공식 API문서를 참고해야 한다.

1
2
3
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd' //Input Display Format 변경
});
cs

Tag : Jquery UI datepicker yyyymmdd



showOtherMonths

1
2
3
$.datepicker.setDefaults({
    showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
});
cs


- false일 경우


- true일 경우



showMonthAfterYear

달력의 위쪽에 보면 년도보다 월이 먼저 표시된다. (ex  : May 2018)

이 옵션을 true로 변경하면 년도가 월보다 먼저 표시된다. (ex  : 2018 May)

년도가 먼저 표시되는 것이 우리나라에서는 일반적이기 떄문에 아주 유용한 옵션이다.

1
2
3
$.datepicker.setDefaults({
    showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시            
});
cs

Tag : Jquery UI datepicker year month position, Jquery UI datepicker year month order



changeYear, changeMonth

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

1
2
3
4
$.datepicker.setDefaults({
    changeYear: true //콤보박스에서 년 선택 가능
    ,changeMonth: true //콤보박스에서 월 선택 가능            
});
cs

Tag : Jquery UI datepicker year month combobox select



showOn

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

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

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

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

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

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

Tag : Jquery UI datepicker button, Jquery UI datepicker input click



buttonImage, buttonImageOnly, buttonText

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

이 옵션은 주석만 봐도 이해가 잘될 거라고 생각한다.

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

Tag : Jquery UI datepicker button image



yearSuffix

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

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

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

Tag : Jquery UI datepicker year text



monthNamesShort, monthNames, dayNamesMin, dayNames

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

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

1
2
3
4
5
6
$.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 텍스트
});
cs

Tag : Jquery UI datepicker month text and tooltip, Jquery UI datepicker day text and tooltip



minDate, maxDate

이 옵션을 설정하면 minDate와 maxDate 안에 해당하지 않는 날짜는 disable 처리된다.

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

Tag : Jquery UI datepicker restrict



포인터 설정

기본적으로 아무 설정을 하지 않으면 datepicker로 선언한 input과 버튼에 마우스를 올려놓으면 마우스 아이콘이 I자 모양이라 보기가 좋지 않고, 클릭을 해야할지 말아야 할지도 애매하다.

<head></head> 사이에 아래와 같이 선언해주면 마우스를 가져다 댔을 때 마우스 아이콘이 손가락 모양으로 바뀐다.

1
2
3
4
5
6
<style>
/*datepicer 버튼 롤오버 시 손가락 모양 표시*/
.ui-datepicker-trigger{cursor: pointer;}
/*datepicer input 롤오버 시 손가락 모양 표시*/
.hasDatepicker{cursor: pointer;}
</style>
cs

Tag : Jquery UI datepicker mouse pointer cursor

반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함