jquery datepicker 사용

웹페이지에서 날짜와 관련한 입력을 받아야 할때
오픈소스로 각광받는 jquery의 플러그인 datepicker를 자주 사용하는 편이다.
우리에게 맞는 형태로 localization 하기 위해서 몇가지 설정을 조정하면 쉽게 사용가능하므로
사용해보지 않은분이 있다면 오픈소스 jquery ui를 사용해보자.

아직 jquery ui framework에 대해서 잘 모른다면 jquery ui 에 대한 다른 글을 참고해보는것도 좋다.


1) 우선 jquery-ui framework을 다운로드 받아야 사용가능하다.[다운로드]
datepicker만 사용하려면 구성요소중 해당 모듈만 선택한 후 다운로드하자.

2) 다운받은 css를 수정하여 폰트관련 설정을 변경하자(폰트종류, 폰트크기 등)

3) 한국어가 나오도록 조정한다.
- jquery 1.3.2 라면 별도의 한글부분이 담겨있는 i18n 이라는 디렉토리안에 ui.datepicker-ko.js라는 파일을 준비해야 한다.
- jquery 1.4.2 에는 기본으로 포함되어 있으므로 locale 설정만 변경하면 한글로 표시된다.

4) 년도표시가 왼쪽으로 나오도록 변경하자(기본은 년도가 오른쪽에 나오는 외국의 달력방식이다)
showMonthAfterYear:true 라는 옵션을 사용하면 된다.

5) 년도와 월이 셀렉트박스로 변경할수있도록 하는것이 사용자에게 좋으니 변경하자.
changeMonth: true
changeYear: true

6) 달력모양의 작은 아이콘이미지를 이용하여 표시하자.
showOn: 'button'
buttonImage: '/image/calendar.gif'
buttonImageOnly: true

7) 날씨의 표현형식을 yyyy-mm-dd 형태로 표시하도록 변경하자.
dateFormat: 'yy-mm-dd'

8) 모두 적용하고 나면 아래와 같은 형태가 된다.

jquery ui 중 datepicker는 여러가지 형태의 UI를 제공해주고 확장플러그인을 이용하면 다양한 방식의 사용이 가능하다.
jquery daterangepicker
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/