기본 설정
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">
<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">
<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">
<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
출처 : https://its-easy.tistory.com/12
[Jquery UI] Datepicker 간단 사용법
Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고, 실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해보았습니다. 현재 최신 버전인 1.12.1 버전 기준입니
its-easy.tistory.com
꼴레뇨님 글
'jQuery' 카테고리의 다른 글
| $('document').ready(function){} 란? (0) | 2023.10.25 |
|---|