jQuery: 참 편리한 날짜선택 위젯- datepicker

웹 페이지를 검색하다 보면, 주로 회원가입 또는 날짜 관련해서 입력을 요구 하는 경우가 많습니다. 이처럼 날짜를 입력 받을 때 직접 입력 받는 방법도 있지만, jQuery에서 제공하는 달력 형식의 UI 위젯중 하나인 datepicker가 있습니다. datepicker 위젯은 제가 현재까지 진행했던 프로젝트에서 빠지지 않고 항상 사용했습니다. 참 편리한 datepicker를 살펴 보겠습니다.

• 위젯(widget) : 프로그래밍에서 widget은 작은 프로그램을 의미하며, 사용자와 컴퓨터가 상호 작용하는 인터페이스 요소입니다.

Datepicker란?

앞에서 설명한 바와 같이 datepicker는 jQuery에서 제공하는 위젯 중 하나이며, 날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할을 합니다. datepicker를 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로도 만들 수 있습니다. datepicker의 동작 순서는 먼저 datepicker 메소드를 통해서 jQuery가 javascript 해석기로 datepicker를 요청합니다. 요청을 받은 javascript 해석기는 DOM에서 id가 datepicker인 요소를 찾습니다. 다시 javascript 해석기로 return 후 화면으로 출력합니다.

사용방법

datepicker를 사용하기 위해서는 기본적으로 다음의 3가지 File을 import해야 합니다.

// 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파일
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
// jQuery UI 라이브러리 js파일
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

단, offline인 경우에는 위의 파일들을 jQuery 홈페이지에서 직접 다운받아서 해당 File의 경로를 설정하면 정상적으로 사용할 수 있습니다.

datepicker의 가장 기본적인 코드를 살펴보면 다음과 같습니다.

//script구문 내부에 해당 메소드를 입력합니다.
$(function() {
    $( "#testDatepicker" ).datepicker({
    });
});

위의 코드를 살펴보면 function 내부에 datepicker 선택자와 메소드로 이루어져 있습니다.

//해당 메소드에서 선택자로 지명한 id가 testDatepicker인 input 태그를 추가합니다.
<input type="text" id="testDatepicker">

datepicker를 출력할 input tag를 선언하면, 해당 id를 찾아 기본 옵션의 날짜선택기를 사용할 수 있습니다.

자주 사용하는 옵션

이번에는 datepicker를 응용해서 구현할 수 있는 여러 가지 옵션 중에서 자주 사용하는 기능들을 소개하겠습니다.

다양한 옵션들을 실제로 사용해 보면서 결과를 확인하면 다음과 같습니다.

$(function() {
  $( "#testDatepicker" ).datepicker({
        showOn: "both", 
        buttonImage: "button.png", 
        buttonImageOnly: true 
  });
});

showOn 옵션은 button 과 image 의 표시여부를 결정하며, 둘 다 선택하거나 한가지만 선택할 수 있습니다. image를 선택할 경우에는 사용할 image의 경로를 정확하게 입력해야 제대로 화면에 나옵니다. buttonImageOnly 옵션은 image를 button 형식 또는 단순히 image만 표시하도록 설정할 수 있습니다. Test를 하기 위해 임의의 이미지를 선택한 모습입니다.

달을 이동하는 옵션에 관한 설명은 다음과 같습니다.

$(function() {
  $( "#testDatepicker" ).datepicker({
         changeMonth: true, 
         changeYear: true,
         nextText: '다음 달',
         prevText: '이전 달' 
  });
});

기본적으로 month이나 year를 이동하려면 상단좌우의 화살표 이미지를 클릭해서 한달 단위로 이동을 할 수 있습니다. 하지만 changeMonth와 changeYear 옵션을 통해서 select box 형식으로 한번에 원하는 month나 year를 선택할 수 있습니다. 또한 nextText와 prevText의 설정을 통해 상단 화살표 툴팁을 정할 수 있습니다.

한번에 여러 month를 표현할 때는 다음과 같이 배열 형식으로 표현할 month의 개수를 설정할 수 있습니다.

$(function() {
    $( "#testDatepicker" ).datepicker({
         numberOfMonths: [2,2]
  });
});

날짜선택기의 하단메뉴 설정과 날자 형식을 설정하는 방법에 대해서 소개하겠습니다.

$(function() {
    $( "#testDatepicker" ).datepicker({
         showButtonPanel: true, 
         currentText: '오늘 날짜', 
         closeText: '닫기', 
         dateFormat: "yymmdd"
  });
});

하단메뉴에는 닫기와 현재날짜를 선택할 수 있으며 showButtonPanel을 통해 표시 여부를 결정하며, closeText와 currentText를 통해서 표시하는 Text를 설정 할 수 있습니다. 또한 dateFormat을 통해서 선택한 날짜에 대한 표현을 다양하게 설정할 수 있습니다.

날짜선택기의 month와 week의 표현도 사용자가 설정할 수 있습니다.

$(function() {
    $( "#testDatepicker" ).datepicker({
         changeMonth: true, 
         dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
         dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], 
         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월']
  });
});

dayNamesMin은 날짜선택기에 표시하는 요일의 약자를 설정하며, dayNames 설정은 날짜선택기에서 해당 요일의 tooltip에 나타나는 Text를 설정하는 옵션입니다. 또한 monthNamesShort는 changeMonth 옵션이 true일 경우 표현하는 month의 Text를 설정하며, monthNames는 반대로 changeMonth 옵션이 false일 경우 표현하는 month의 Text를 설정할 수 있습니다.

마지막으로 날짜 선택시 날짜의 선택범위를 설정하는 옵션입니다.

$(function() {
    $( "#testDatepicker" ).datepicker({
         minDate: -20, 
         maxDate: "+3D"
  });
});

minDate는 설정할 최소 날짜를 의미하며 현재날짜를 기준으로 +-를 통해 일단위로 설정 할 수 있으며, 현재날짜에 대한 상대 날짜가 아닌 절대날짜로 D(날짜), M(달),Y(년)을 숫자 뒤에 붙여서 표현할 수 있습니다.

실제 프로젝트에서 사용한 사례

실제로 프로젝트에서 사용한 예를 바탕으로 응용된 모습을 살펴보겠습니다.

등록화면에서 날짜를 입력 받는 부분(시작날짜,종료날짜)을 datepicker를 이용해서 구현한 모습입니다. 보기에는 단순히 날짜선택기 한 개를 구현했지만, 실제 프로젝트에서는 이렇게 날짜선택기를 통해서 날짜를 입력 받는 부분이 10곳 이상 있었습니다.

조회하는 화면에서 분석한 날짜의 범위 내에서만 사용자가 날짜를 선택할 수 있도록 min, max 날짜를 설정한 모습입니다. 사용자는 클릭 몇 번으로 8자리의 날짜를 쉽게 입력할 수 있습니다.

글을 마치며

지금까지 datepicker 위젯의 다양한 기능을 살펴봤습니다. 앞에서 살펴보았듯이 datepicker는 간단한 코드만으로 다양한 옵션을 사용할 수 있는 점에서 아주 매력적입니다.  이 글이 datepicker를 사용하는 개발자 분들에게 조그만 보탬이 되었으면 좋겠습니다. 감사합니다.

참고문헌 및 site

• Head First jQuery - 한빛미디어
• http://jqueryui.com/datepicker/