mrkjm@nate.comjQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #1
Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고,
실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해 보았습니다.
설명한 기준은 1.12.1 버전 입니다.
웹 페이지를 검색하다 보면, 주로 회원가입 또는 날짜 관련해서 입력을 요구 하는 경우가 많습니다.
이처럼 날짜를 입력 받을 때 직접 입력 받는 방법도 있지만, jQuery에서 제공하는 달력 형식의 UI 위젯중 하나인 Datepicker가 있습니다.
Datepicker 위젯은 제가 현재까지 진행했던 프로젝트에서 빠지지 않고 항상 사용했습니다.
참 편리한 Datepicker를 살펴 보겠습니다.
위젯(widget) :
프로그래밍에서 widget은 작은 프로그램을 의미하며, 사용자와 컴퓨터가 상호 작용하는 인터페이스 요소입니다.
Datepicker란?
앞에서 설명한 바와 같이 Datepicker는 jQuery에서 제공하는 위젯 중 하나이며,
날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할을 합니다.
Datepicker를 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로도 만들 수 있습니다.
Datepicker의 동작 순서는 먼저 Datepicker 메소드를 통해서 jQuery가 javascript 해석기로 Datepicker를 요청합니다.
요청을 받은 javascript 해석기는 DOM에서 id가 Datepicker인 요소를 찾습니다.
다시 javascript 해석기로 return 후 화면으로 출력합니다.
Datepicker UML
1. 사용방법
Datepicker를 사용하기 위해서는 기본적으로 다음의 3가지 File을 import해야 합니다.
1 2 3 4 5 6 7 8 | // jQuery UI CSS파일 <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> // jQuery 기본 js파일 // jQuery UI 라이브러리 js파일 | cs |
Datepicker의 가장 기본적인 코드를 살펴보면 다음과 같습니다.
1 2 3 4 5 | //script구문 내부에 해당 메소드를 입력합니다. $(function() { $( "#testDatepicker" ).datepicker({ }); }); | cs |
위의 코드를 살펴보면 function 내부에 Datepicker 선택자와 메소드로 이루어져 있습니다.
1 2 | //해당 메소드에서 선택자로 지명한 id가 testDatepicker인 input 태그를 추가합니다. <input type="text" id="testDatepicker"> | cs |
기본적인 Datepicker의 모습
위에 코드를 HTML로 정리하면 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> </head> <body> <input type="text" id="testDatepicker"> <script> $(function() { $( "#testDatepicker" ).datepicker({ }); }); </script> </body> </html> | cs |
Datepicker를 출력할 input tag를 선언하면, 해당 id를 찾아 기본 옵션의 날짜선택기를 사용할 수 있습니다.
2. Datepicker 옵션 설정 방법
① Datepicker 별 옵션 설정
이번에는 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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> </head> <body> <input type="text" id="testDatepicker"> <script> $(function() { $( "#testDatepicker" ).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:일년후) }); //초기값을 오늘 날짜로 설정 $('#testDatepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후) }); </script> </body> </html> | cs |
② 전체 Datepicker 옵션 일괄 설정
아래의 코드는 모든 Datepicker에 대한 옵션을 일괄적으로 설정하는 방법입니다.
한번의 설정으로 testDatepicker, sampleDatepicker의 옵션을 모두 설정할 수 있습니다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> </head> <body> <input type="text" id="testDatepicker"> <input type="text" id="sampleDatepicker"> <script> $(function() { $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' //Input Display Format 변경 ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시 ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시 ,changeYear: true //콤보박스에서 년 선택 가능 ,changeMonth: true //콤보박스에서 월 선택 가능 ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시 ,buttonImage: "이미지 버튼 경로" //버튼 이미지 경로 ,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로 선언 $("#testDatepicker").datepicker(); $("#sampleDatepicker").datepicker(); //From의 초기값을 오늘 날짜로 설정 $('#testDatepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후) //To의 초기값을 내일로 설정 $('#sampleDatepicker').datepicker('setDate', '+1D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후) }); </script> </body> </html> | cs |
3. Datepicker 옵션별 세부 설정
① dateFormat
input의 displayFormat을 변경해주는 옵션입니다.
기본값은 DD/MM/YYYY 형태인데 우리나라에서 자주 사용되는 형태가 아닙니다.
아래와 같이 변경하면 YYYY-MM-DD 형태가 됩니다.
다른 형태가 필요하다면 공식 API문서를 참고해야 합니다.
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd' //Input Display Format 변경
});
② showOtherMonths
$.datepicker.setDefaults({
showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
});
FLASE 일 경우
TRUE 일 경우
③ showMonthAfterYear
달력의 위쪽에 보면 년도보다 월이 먼저 표시됩니다. (ex : May 2018)
이 옵션을 true로 변경하면 년도가 월보다 먼저 표시됩니다. (ex : 2018 May)
년도가 먼저 표시되는 것이 우리나라에서는 일반적이기 때문에 아주 유용한 옵션입니다.
$.datepicker.setDefaults({
showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시
});
FLASE 일 경우
TRUE 일 경우
④ changeYear, changeMonth, nextText, prevText
changeYear와 changeMonth는 선택 하는 날짜의 범위가 넓을 때 앞뒤 화살표가 아닌 콤보박스로 년도와 월을 선택 할 수 있도록 해주는 옵션입니다.
nextText와 prevText의 설정을 통해 화살표에 툴팁을 지정 할 수 있습니다.
$.datepicker.setDefaults({
changeMonth: true, // true 설정 시 년도를 선택 할 수 있는 콤보박스 표시
changeYear: true, // true 설정 시 월을 선택 할 수 있는 콤보박스 표시
nextText: '다음 달', // 상단 우측 화살표에 툴팁을 지정
prevText: '이전 달' // 상단 좌측 화살표에 툴팁을 지정
});
FLASE 일 경우
TRUE 일 경우
JQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #2
JQuery, UI, 날짜선택, 위젯, Datepicker, 사용법, 달력, 날짜선택기
