jQueryUI Datepicker - Calendar 사용법

더이상 javascript calendar 선택에 고민하지 말자..

jQueryUI Datepicker Plugin

멀더도 이것, 저것 심지어 만들어서 사용도 해왔지만, 이제 다 버렸다. ...
jQueryUI 에서 가장 사랑받는 ui 는 아마도 Dialog > Tab > Tree ,,, 그 다음이 Calendar 일것 같다. (개인적인 소견임)

아래는 제가 프로젝트에 적용한 UI Capture 화면 입니다.
Simple한 화면 구성에서 부터 복잡한 화면 구성까지  거의 대부분의 기능이 포함되어 있다.. 어차피 jQuery를 사용한다면, Calendar 는 jQueryUI 의 Calendar Plugin 을 사용하자. :D

사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요

<!-- jquery-ui resource embed start -->

<link  href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jquery-ui resource embed end -->
 

$(function() {
        $("#startDate").datepicker(   // inputbox 의 id 가 startDate 이겠죠.
                {dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면  inputbox 에 '2011/04/29' 로표시
                 , showOn: 'button' // 우측에 달력 icon 을 보인다.
                 , buttonImage: '/images/Icon_calendar.gif'  // 우측 달력 icon 의 이미지 패스
                 , buttonImageOnly: true //  inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
                 , changeMonth: true // 월선택 select box 표시 (기본은 false)
                 ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
                 ,showButtonPanel: true // 하단 today, done  버튼기능 추가 표시 (기본은 false)
               });

        $("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
                , buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
                , changeMonth: true,changeYear: true,showButtonPanel: true});

    });
   
    $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)

만약 토요일과 일요일 색을 바꾸거나, 달력 크기를 조절 하시려면 아래와 같이 CSS 처리로 가능 합니다.

.ui-datepicker-week-end {color:red;}
.ui-datepicker-week-end .ui-state-default {color:red;}

div#ui-datepicker-div { width: 250px; }

jQueryUI 의 문서나 소스를 자세히 보자면, 코드에서 어떤 향기를 느낄때가 있다... GoSu의 향기가~
그럼 즐플~