jquery ui datepicker 에서 공휴일 지정해서 선택 불가능하게 만들기

munilive
munilive

jQuery UI 에 있는 datepicker 이용해서 달력을 생성할 때 공휴일에는 선택을 불가능하게 하도록 하는 코드입니다.
인터넷에서 찾은 코드에다가 약간의 수정을 더 해서 매년 반복되는 공휴일과 한 해에만 적용되는 공휴일을 구분할 수 있게 해놨습니다.

코드를 보면 어느 정도 이해할 것이라고 생각하고 리턴 되는 값에 대한 것만 설명하면,

result = [false, 'date-holiday', holiday.title];
// [선택 가능 여부, "CSS 클래스 이름", 마우스 오버 시 타이틀값]

[]안에
첫번째 인자는 해당 일자를 사용자가 선택할 수 있게 할지 못 하게 할지 여부 (true는 가능, false는 불가능)
두번째 인자는 추가적인 CSS 클래스 이름으로 예를 들어 .date-holiday라는 클래스 이름으로 CSS 속성을 지정해 두면 해당 속성이 해당 일자 칸에 적용됩니다.
마지막, 세 번째 인자는 마우스를 올렸을 때 나타나는 타이틀 명 입니다.

실제 적용하는 코드를 첨부해 드리니 한번 적용해 보시면 금방 알 수 있을 거예요.

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
var holidays = {
  "0101":{type:0, title:"신정", year:""},
  "0301":{type:0, title:"삼일절", year:""},
  "0505":{type:0, title:"어린이날", year:""},
  "0606":{type:0, title:"현충일", year:""},
  "0815":{type:0, title:"광복절", year:""},
  "1003":{type:0, title:"개천절", year:""},
  "1009":{type:0, title:"한글날", year:""},
  "1225":{type:0, title:"크리스마스", year:""},

  "0209":{type:0, title:"설날", year:"2013"},
  "0210":{type:0, title:"설날", year:"2013"},
  "0211":{type:0, title:"설날", year:"2013"},
  "0918":{type:0, title:"추석", year:"2013"},
  "0919":{type:0, title:"추석", year:"2013"},
  "0920":{type:0, title:"추석", year:"2013"},
  "0517":{type:0, title:"석가탄신일", year:"2013"}
};

jQuery(function($){
   $.datepicker.regional['ko'] = {
      closeText: '닫기',
      prevText: '이전달',
      nextText: '다음달',
      currentText: '오늘',
      monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',
      '7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
      monthNamesShort: ['1월','2월','3월','4월','5월','6월',
      '7월','8월','9월','10월','11월','12월'],
      dayNames: ['','','','','','',''],
      dayNamesShort: ['','','','','','',''],
      dayNamesMin: ['','','','','','',''],
      weekHeader: 'Wk',
      dateFormat: 'yy-mm-dd',
      firstDay: 0,
      isRTL: false,
      showMonthAfterYear: true,
      yearSuffix: ''
   };
   $.datepicker.setDefaults($.datepicker.regional['ko']);

   $('#booking_date').datepicker({
      showOn: 'both',
      buttonImage: '&amp;lt;?=$g4[path]?&amp;gt;/img/calendar.gif',
      buttonImageOnly: true,
      buttonText: "달력",
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      yearRange: 'c-99:c+99',
      minDate: '+1d',
      beforeShowDay: function(day) {
         var result;
         // 포맷에 대해선 다음 참조(http://docs.jquery.com/UI/Datepicker/formatDate)
         var holiday = holidays[$.datepicker.formatDate("mmdd",day )];
         var thisYear = $.datepicker.formatDate("yy", day);

         // exist holiday?
         if (holiday) {
         if(thisYear == holiday.year || holiday.year == "") {
            result =  [false, "date-holiday", holiday.title];
         }
         }

         if(!result) {
         switch (day.getDay()) {
            case 0: // is sunday?
               result = [false, "date-sunday"];
               break;
            case 6: // is saturday?
               result = [true, "date-saturday"];
               break;
            default:
               result = [true, ""];
               break;
         }
         }

         return result;
      }
   });
});
</script>

위 코드를 실행하면 아래와 같은 이미지의 Datepicker가 만들어 집니다.
미리 보기를 통해 동작하는 스크립트를 확인 할 수 있습니다.
{% figure [caption:“JQuery UI DatePicker Holiday Disable Image”] %} JQuery UI DatePicker Holiday Disable Image {% endfigure %}

munilive

munilive

Backend Application Developer

Share

Comments

Related Posts

datepicker 시작일과 종료일 설정 시 사용하기 좋은 팁

datepicker 시작일과 종료일 설정 시 사용하기 좋은 팁

jQuery UI Datepicker를 이용하여 시작/종료일 설정 시 시작일은 종료일 이후 날짜를, 종료일은 시작일 이전날짜를 선택하지 못하게 하는 방법에 대한 설명 글이다.

munilive munilive ·
JQuery : 클래스 이름만으로 페이지 전체에 롤오버 이미지 쉽게 적용하기

JQuery : 클래스 이름만으로 페이지 전체에 롤오버 이미지 쉽게 적용하기

마우스 오버 시 변경될 이미지를 쌍으로 만들어 사용할 경우 지정된 class만으로 롤오버 이미지를 자동 적용하는 스크립트에 대한 코드입니다.

munilive munilive ·
`jquery datepicker`에서 년도와 월만 선택 가능하게 하기

`jquery datepicker`에서 년도와 월만 선택 가능하게 하기

jQuery Datepicker를 이용하여 년도와 월만 선택 가능하도록 인터페이스를 변경하는 코드에 대한 설명 및 코드, 코드 예제를 제공 한다.

munilive munilive ·