프로젝트중 달력 컨트롤을 사용해야 하는 경우가 많은듯하다..
그동안 사용하던 ASP.NET 의 calendar 컨트롤을 버리고 jQuery plugin중 하나인 jQuery Datepicker 를 사용하기로 결정을 내렸다.
이유는 jQuery 매번 달력 컨트롤을 비하인드에서 생성하는 것 보다. 간단한 선택을 할때는 jQuery를 사용하고 이벤트를 기록해야 하는 경우에는 다른 플러그인이나 또는 asp.net의 calender control을 사용하려는 계획이다.
날짜 선택에서는 jQeury datepicker가 가장 적합하다는 결론이라고나 할까??
먼저 홈페이지의 주소를 알려 주겠다 . 달력 컨트롤 말고도 상당히 괞찮은게 많다.. 꼭 들어가 보자!!
먼저 특징을 알아보자.
-
유연한 디자인 : jQuery 플러그인들의 특징이라면 특징인데.. 모든 플러그인의 디자인은 모두 css에 의존적이다. 의존적이라는 말은 모든 디자인은 css 만을 사용한다는 의미로써 코드와 디자인이 완전 분리되기 때문에 디자인이 상당히 유연해 진다.
-
지역화 : 마치 닷넷의 지역화 코드처럼 지역화 코드 jQuery.datepick-ko.js 를 제공하여 한국어를 지원한다. 세계화 추세에 맞춘 서비스라 하겠다..(굉장히 좋은 아이디어라고 생각된다. )
-
간단한 사용법 : 이것도 jQuery 플러그인들의 특징이라고 생각된다.
그럼 샘플 소스를 한번 보자. ( 홈페이지의 소스와 다를바 없다. 홈페이지 참조해라)
$(function(){
$('#defaultInlineDatepicker').datepick({"onSelect" : function(value,date,inst){
alert("선택 : " + value);
}});
$('#defaultPopupDatepicker').datepick();
});
<body>
<span id="defaultInlineDatepicker" class="datepicker"></span>
<input type="text" id="defaultPopupDatepicker" class="datepicker"/>
</body>
- 페이지에 달력이 들어가 있는 defaultInlineDatepicker
- 입력 컨트롤에 포커스가 가면 달력이 나타나는 defaultPopupDatepicker
위의 두가지 방식중에 어떠한 것이 좋다고 말하기는 애매한듯하다. 둘의 사용법이 틀리다고 생각 된다. 입력 컨트롤에 값을 채워 넣는 방식은 검색의 조건이나 폼의 값으로 날짜를 셋팅하여야 할 때 사용되고 , 첫번째 방식은 날짜를 선택함으로써 바로 어떠한 다른 동작이 이루어질때 사용된다고 생각된다.
그런데.. 우리 보통 달력 이미지를 클릭해서 달력을 나타내지 않았었나? 그럼 그것도 추가해보자.
$('#btnPopDatepicker').click(function(){
$('#defaultPopupDatepicker').trigger('focus');
});
<img src="" alt="달력으로 날짜 입력" id="btnPopDatepicker" />
뭐.. 별꺼 없다.. 이미지 태그 하나 추가하였고. 그 이미지 클릭 이벤트에 defaultPopupDatepicker 컨트롤의 focus 이벤트의 trigger를 생성하였다.
참.. 쉽다... 하면 할수록.. jQuery 매력있다.. ♡
다른 속성은 차후 블로그에 추가하여 더 고급적으로 사용해 보도록 하자.