jQuery: datepicker 사용 사례
datepicker 는 날자 처리를 위하여 많이 사용되고 있습니다. 기존 포스트에 한번 소개된적이 있습니다. 이전에 datepicker 의 여러가지 사용방법을 설명하였다면 이번 포스트에서는 실제 프로젝트에 사용한 방법과 datepicker 와 직접 입력시 사용되는 inputmask와 같이 사용하여 적용되는 방법을 살펴보겠습니다.
필요한 기능
달력에 휴일표시. 직접입력시 숫자만 입력하면 yyyy-MM-dd 형식으로 표시되어야함. 화면에 보여지는것은 yyyy-MM-dd형식이지만 실제 넘어가는 값은 yyyyMMdd이어야함.
휴일처리
휴일은 DB에 관리되어 저장되고 있습니다. 그렇기 때문에 일단 DB에 있는 휴일정보를 스크립트에서 사용이 가능하게 만들어야 했습니다. 이 부분은 간단하게 jsp로 만들었으며 DB호출 부분은 캐씨로 처리하였습니다. 그리하여 다음과 같은 형태로 생성하였습니다.
var holidays = {"20100101":{type:0, title:"신정", year:"2010"},"20100212":{type:0, title:"설날연휴", year:"2010"},.....
이후 휴일에 대한 처리는 datepicker 의 beforeShowDay를 이용했습니다. beforeShowDay는 날자를 보여주기 전에 호출되는 이벤트로 날자표시에 대한부분을 컨트롤 가능합니다.
$.datepicker.setDefaults(
{
buttonImage : "img/ico_cal2.gif",
changeMonth: true,
changeYear: true,
yearRange: 'c-99:c+99',
beforeShowDay: function(day) {
var result = null;
var holiday = holidays[$.datepicker.formatDate("yymmdd",day )];
if (holiday) {
result = [true, "date-holiday", holiday.title];
}
if(!result) {
switch (day.getDay()) {
case 0: //일요일
result = [true, "date-sunday"];
break;
case 6: // 토요일
result = [true, "date-saturday"];
break;
default:
result = [true, ""];
break;
}
}
return result;
}
});
기본에 서버로부터 생성한 holidays를 통하여 날자가 휴일인지 구분하며 토요일과 일요일에 대하여 각각 구분되는 css를 추가합니다. 소스중 result = [true, "date-sunday"]에 해당하는 부분으로 true는 선택 가능여부이며 false로 할경우 선택이 불가능합니다. 뒤에 추가되는 부분은 관련 날자에 입력한 문자열이 class에 추가됩니다. 추후 추가된 class를 통하여 휴일을 표시합니다. 휴일 표시 css
.blue, .date-saturday a {color:#006fb8 !important;}
.red, .date-sunday a, .date-holiday a {color:#ec3636 !important;}
날자 포맷 처리
필요기능중 날자 포맷에 대한 처리가 필요하여 datepicker 를 사용하는 새로운 플러그인을 만들어 관련 부분을 처리했습니다.
$.fn.extend({
bdhDatePicker: function(options) {
var input = $(this);
var hiddenInput = $('<input>');
hiddenInput.attr("name",$(this).attr("name"));
hiddenInput.attr("type","hidden");
if(input.val() && input.val().length > 0){
hiddenInput.val(parseDate(input.val()));
}
input.after(hiddenInput);
input.attr("name","");
input.focusout(function(){
if($(this).val().length == 10){
hiddenInput.val(parseDate(input.val()));
}else if($(this).val().length == 0){
hiddenInput.val("");
}
});
var defaultOptions = {
showOn : 'button',
onSelect: function () {
hiddenInput.val(parseDate(input.val()));
}
};
$.extend( true, defaultOptions, options );
input.datepicker(defaultOptions);
return input;
}
});
bdhDatePicker 이름의 플러그인을 새로만들었으며 관련 내용을 보면 기존 input에 새로운 hidden 인풋을 추가합니다. 기존 input의 name을 삭제하고 그 name을 추가한 hidden input의 name으로 지정합니다. onSelect에 선택한 값을 hidden input에 yyyyMMdd형태의 포맷으로 입력하도록 이벤트를 걸어서 실제 표시되는 날자와 서버로 넘어가는 날자의 포맷을 처리했습니다. 이런식의 처리를 통하여 여러화면에서 bdhDatePicker 플러그인을 사용하면 필요한 조건(보이는 날자 포맷과 서버로 넘어가는 날자포맷이 다름)에 맞게 사용이 가능하도록 플러그인을 생성했습니다.
inputmask 및 플러그인 적용.
생성된 플러그인을 사용하면 앞에 필요한 여러기능들을 만족하게 되었으나 플러그인을 사용하는 많은 페이지에 각각 호출하는것은 효율이 떨어지기 때문에 특정 규칙을 정하고 공통 스크립트에 관련 플러그인을 호출하여 공통으로 처리했습니다.
$(".datepicker").each(function(){
$(this).bdhDatePicker().inputmask("9999-99-99");
});
});
달력이 필요한 input에는 datePicker class를 입력하기로 하고 모든 페이지에 들어가는 공통 스크립트에서 플러그인을 호출하여 전체 페이지에 적용되도록 했습니다. inputmask 플러그인을 통하여 숫자만 입력해도 자동으로 날자 포맷이 처리되게 했습니다.
글을 마치며
jQuery의 여러가지 플러그인중 datePicker를 실제 적용한 부분에 대하여 이야기 해 보았습니다. 앞서 설명한 부분처럼 실제 사용하는 것은 기본 기능들 외에 몇가지 추가되는 부분들이 있기 때문에 여러 플러그인을 합치거나 반복되는 부분들을 새로운 플러그인을 만들어서 사용하기도 합니다. 관련 내용을 참고해서 필요한 부분을 사용하여 여러 프로젝트에 도움이 되었으면 좋겠습니다. 감사합니다.