Datepicker 라이브러리 선택 불가능한 날짜 처리

Datepicker 라이브러리 잘 사용하고 계시죠? 웹 개발에 필수라고 해도 과언이 아니죠.

프로젝트를 하다 보면 datepicker 선택가능한 날짜를 막아달라는 요구사항이 많은데요. 이를 어떻게 처리해야 하는지 간단하게 정리해 보겠습니다.

 

Datapicker 선택 불가능한 날짜

소스코드를 보시면 생각보다 간단해서 금방 이해가 되실 겁니다. 소스코드 한번 보시죠.

<label for="datepicker">Choose a date:</label>
<input type="text" id="datepicker">

// 선택 불가능한 날짜 배열
var disabledDates = ["2023-02-14", "2023-02-15", "2023-02-16"];

// datepicker 초기화
$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var dateString = $.datepicker.formatDate('yy-mm-dd', date);
      if (disabledDates.indexOf(dateString) != -1) {
        return [false];
      } else {
        return [true];
      }
    }
  });
});

위의 코드에서 'disabledDates' 배열은 선택 불가능한 날짜의 목록을 나타냅니다. 

'beforeShowDay' 콜백 함수를 사용하여 각 날짜를 확인하고 'disabeldDates' 배열에 포함된 경우 'return [false]'를 반환하여 선택 불가능한 날짜로 처리합니다. 

 

위 샘플코드는 선택불가능한 날짜를 지정한 코드이지만 ajax를 이용해서 동적으로 불러와서 적용해 볼 수도 있습니다.