[JavaScript, jQuery] datepicker 에서 특정 기간 비활성화 하기

예약 모듈을 맡게되면서, 어떻게 예약가능한 날짜를 다 표시하지? 라는 생각에 막막했는데

거꾸로 생각하니 쉽게 느껴졌다. '예약 불가능한 날짜만 비활성화하면 되잖아?'

 

단순했던 나.

 

jQuery UI 에서 제공하는 datePicker를 이용해서 달력을 만들었고, beforeShowDay 속성을 통해 특정일을 비활성화하는데에 성공했다. 

bookedDays = ["2021-03-21", "2021-03-30" , "2021-04-01"]

function disableDates(){
		 var m = date.getMonth() + 1;
         var d = date.getDate();
         var y = date.getFullYear();
             for (i = 0; i < bookedDays.length; i++) {
             if ($.inArray(y + '-' + m + '-' + d, bookedDays) != -1) {
             return [false];
             }
             }
             return [true];
}

 

bookedDays 에 넣은 3개의 날짜가 선택안되는 것을 확인하고 쾌재를 불렀다

하지만 프로젝트를 진행하다보니, inTime, outTime 두개의 Timestamp 값을 받게되었고

그 사이에 모든 날짜값을 비활성화 해야했다.

 

처음엔 눈앞이 막막했지만, 역시 정보의 바다에서 해결책을 찾음

 

     function disableDates(){
 		 var dateRange = [];
         var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);

  var sdate = "2021-3-29";
  var edate = "2021-3-31";

		  for (var d = new Date(startdate); d <= new Date(enddate); d.setDate(d.getDate() + 1)) {
  			dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
 			 }
  		return [dateRange.indexOf(dateString) == -1];
  }

 

어떤분이 올려주신 소중한 코드

이렇게 하면 sdate와 edate 사이의 모든 날짜가 비활성화된다. 

여기서 예약된 모든 날짜값을 받아 비활성화 하려면 날짜부터 return 까지 JSTL 로 반복문을 돌려준다

 

<c:forEach var="rsv" items="${booked}">
    <fmt:formatDate var="rsvInDt" value="${rsv.rsvVO.rsv_intime}" pattern="YYYY-MM-dd"/>
	<fmt:formatDate var="rsvOutDt" value="${rsv.rsvVO.rsv_outtime}" pattern="YYYY-MM-dd"/>${rsvOutDt}

                            var startdate = "${rsvInDt}"
                            var enddate = "${rsvOutDt}";

                            for (var d = new Date(startdate); d <= new Date(enddate); d.setDate(d.getDate() + 1)) {
                                dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
                            }
                            return [dateRange.indexOf(dateString) == -1];
 </c:forEach>

 

마이바티스로 받아온 값이 Timestamp 타입이라 fmt:formatDate 를 거쳤다.

(Datepicker dateformat을 "yy-mm-dd" 형태로 줬고 반환형은 String이기 때문)

끝 !