이 소스에서 특정 날짜 선택 제한 하는거 가능할까요?

이 소스에서 특정 날짜 선택 제한 하는거 가능할까요?

QA

이 소스에서 특정 날짜 선택 제한 하는거 가능할까요?

본문

안녕하세요.
아래는 제가 사용하는 소스중 일부입니다.

 

날짜 선택관련인데,
sdate가 시작 날짜 edate가 끝나는 날짜 입니다.

 

예전에 이소스에서 시작 날짜를 오늘이 아닌 며칠 이후부터 선택하게 하는 방법을 문의드렸었고 
답변 얻어 유용하게 사용하고 있었는데, 

 

이번엔 다른 방법의 날짜 선택 제한이 필요해서 또 문의드립니다.

 

제가 원하는건 특정 날짜가 선택되지 않게하고 싶습니다. 
예를 들어 9월 26일, 9월 27일, 9월 30일이 선택이 되지 않게 하고 싶습니다. 

이런식으로 오늘부터 며칠간 선택이 안되는게 아니라, 
원하는 특정 날짜들만 선택이 안되게 하고 싶습니다.

 

검색해보니

// 특정날짜들 배열
var disabledDays = ["2023-7-9","2023-7-24","2023-7-26"];

// 특정일 선택막기
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

이런식으로 제어를 하는거 같은데, 


검색한걸 이리저리 수정해서 넣어보아도 제 실력으론 제대로 작동되질 않네요.

혹시 의뢰를 가지 않아도 될 정도의 문제라면 아시는 분 좀 알려주시면 정말 감사하겠습니다.

 


    $('#sdate').datetimepicker({
        allowTimes:at,
        timepicker:false,
        format:    'Y-m-d',
        onClose:function(ct,$i){
          if($("#sdate").val() != "" && $("#edate").val() != "") {              
            GoPayCheck();
          }
        },onShow:function( ct ){
   this.setOptions({
   minDate:"<?php echo 'G5_TIME_YMD';?>",
    maxDate:jQuery('#edate').val()?jQuery('#edate').val():false
   })
  }
    });
    $('#edate').datetimepicker({
        allowTimes:at,
        timepicker:false,
        format:    'Y-m-d',
        onClose:function(ct,$i){
          if($("#sdate").val() != "" && $("#edate").val() != "") {              
            GoPayCheck();            
          }
        },onShow:function( ct ){
   this.setOptions({
    minDate:jQuery('#sdate').val()?jQuery('#sdate').val():"<?php echo 'G5_TIME_YMD';?>"
   })
  }
    });

이 질문에 댓글 쓰기 :

답변 3

다음과 같은 방법도 있으니 참고하셔서 원하시는 형태로 구현하시면 될 것 같습니다

우선 특정 날짜들만 선택이 안되게 하려면 jQuery UI Datepicker의 beforeShowDay 옵션을 사용하여 선택할 수 있는 날짜를 제한하면 될것 같습니다.

 


var disabledDates = ['2023-09-26', '2023-09-27', '2023-09-30'];
$('#sdate').datetimepicker({
    allowTimes: at,
    timepicker: false,
    format: 'Y-m-d',
    onClose: function (ct, $i) {
        if ($("#sdate").val() != "" && $("#edate").val() != "") {
            GoPayCheck();
        }
    },
    onShow: function (ct) {
        this.setOptions({
            minDate: "<?php echo 'G5_TIME_YMD'; ?>",
            maxDate: jQuery('#edate').val() ? jQuery('#edate').val() : false,
            beforeShowDay: function (date) {
                var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
                return [disabledDates.indexOf(formattedDate) === -1];
            }
        });
    }
});
$('#edate').datetimepicker({
    allowTimes: at,
    timepicker: false,
    format: 'Y-m-d',
    onClose: function (ct, $i) {
        if ($("#sdate").val() != "" && $("#edate").val() != "") {
            GoPayCheck();
        }
    },
    onShow: function (ct) {
        this.setOptions({
            minDate: jQuery('#sdate').val() ? jQuery('#sdate').val() : "<?php echo 'G5_TIME_YMD'; ?>",
            maxDate: new Date() // 종료일은 현재 날짜까지만 선택 가능
        });
    }
});

 

disabledDates 배열에 제한하려는 특정 날짜들을 추가하고, beforeShowDay 옵션을 사용하여 해당 날짜가 배열에 포함되어 있는지 확인하여 선택 가능 여부를 결정하게 되며, 따라서 9월 26일, 9월 27일, 9월 30일을 선택할 수 없게 됩니다.

친절하신 답변 정말 감사합니다.
알려주신 내용을 원본 내용에 덮어쓰면 되는건가요?
그렇게 했더니, 날짜 제어되지 않고,
sdate는 날짜 선택이 이번달만 되고 다음달로 넘어가 지지 않네요.
edate는 날짜 선택이 아무것도 안되고요.

네. 처음 질문한 부분을 알려주신대로 수정했는데, 위에 적은것처럼 날자 제어 되지 않는 상황입니다.

그리고 크롬에서 확인하면 아래와 같은 메세지 나옵니다.
Uncaught TypeError: Cannot read properties of undefined (reading 'formatDate')
    at a.fn.init.beforeShowDay ((색인):1328:50)
    at jquery.datetimepicker.js:1753:52

아래 부분입니다.
                var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);

$.datepicker.formatDate 함수를 찾을 수 없어 발생하는 것으로 보입니다. 이 오류는 jQuery UI Datepicker에서 formatDate 함수를 사용하려고 할 때 발생합니다.

datetimepicker 플러그인은 jQuery UI Datepicker와 약간 다른 방식으로 동작하며 formatDate 함수를 직접 사용하지 않습니다. format 옵션을 사용하여 날짜 형식을 지정해서
아래와 같이 수정해 볼 수 있을 것 같습니다.


var disabledDates = ['2023-09-26', '2023-09-27', '2023-09-30'];
$('#sdate').datetimepicker({
    allowTimes: at,
    timepicker: false,
    format: 'Y-m-d',
    onClose: function (ct, $i) {
        if ($("#sdate").val() != "" && $("#edate").val() != "") {
            GoPayCheck();
        }
    },
    onShow: function (ct) {
        this.setOptions({
            minDate: "<?php echo 'G5_TIME_YMD'; ?>",
            maxDate: jQuery('#edate').val() ? jQuery('#edate').val() : false,
            disabledDates: disabledDates // disabledDates 배열을 사용하여 특정 날짜를 비활성화
        });
    }
});
$('#edate').datetimepicker({
    allowTimes: at,
    timepicker: false,
    format: 'Y-m-d',
    onClose: function (ct, $i) {
        if ($("#sdate").val() != "" && $("#edate").val() != "") {
            GoPayCheck();
        }
    },
    onShow: function (ct) {
        this.setOptions({
            minDate: jQuery('#sdate').val() ? jQuery('#sdate').val() : "<?php echo 'G5_TIME_YMD'; ?>",
            maxDate: new Date() // 종료일은 현재 날짜까지만 선택 가능
        });
    }
});

계속 시간내주셔서 정말 감사합니다.
알려주신대로 바꿔도 여전히 날짜 제어 되지 않네요.
sdate는 이번에는 다음 달도 선택이 되긴 하지만 여전히 날짜 제어 안되고,
edate는 여전히 아무 날짜도 선택이 안되는 상황입니다.

 
  $('#sdate').datetimepicker({
        allowTimes:at,
        timepicker:false,
        format:    'Y-m-d',
        onClose:function(ct,$i){
          if($("#sdate").val() != "" && $("#edate").val() != "") {              
            GoPayCheck();
          }
        },onShow:function( ct ){
   this.setOptions({
   minDate:"<?php echo 'G5_TIME_YMD';?>",
    maxDate:jQuery('#edate').val()?jQuery('#edate').val():false,
    beforeShowDay : disableSomeDay
   })
  }
 });

지금 위 부분에 beforeShowDay 적용이 안되어서 적용이 안되는듯 한데 확인 해보세요

 

참고: https://mingmi-programming.tistory.com/86

친절하신 답변 감사합니다.
알려주신 링크도 검색해서 찾아봤던 곳이네요.
말씀해 주신 beforeShowDay : disableSomeDay는 저 부분이 아닌 다른곳에 넣어봤었습니다.
(저 부분에 넣어도 정상작동 안되더라고요.)

될듯될듯 안되서 계속 구글링해서 이것저것 적용해보고 있는데 잘 안되더라고요.

그러던중, 아래 소스를 찾았는데,
제가 찾는것과 반대되는 기능입니다.
선택 가능한 날짜를 설정해 주면 그 날짜만 선택 가능한건데,
이걸 아래처럼 제 소스에 맞게 수정했더니 정상 작동하더라고요.


<script>
$(function() {
 $(".datetimepicker").datetimepicker({
     showMonthAfterYear:true,
     monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
     showAnimation: 'slider',
     dateFormat: 'yy-mm-dd',
     showOtherMonths: true,
     selectOtherMonths: true,
     changeMonth: true,
     changeYear: true
 });
});

$(function() {
  //선택가능 날짜
  var availableDates = ["2023-09-26", "2023-09-27"];

  function available(date) {
   var thismonth = date.getMonth()+1;
   var thisday = date.getDate();

   if(thismonth<10){
    thismonth = "0"+thismonth;
   }

   if(thisday<10){
    thisday = "0"+thisday;
   }

   ymd = date.getFullYear() + "-" + thismonth + "-" + thisday;

      if ($.inArray(ymd, availableDates) >= 0) {
          return [true,"",""];
      } else {
          return [false,"",""];
      }
  }

$('.datetimepicker').datetimepicker({
   dateFormat: "yy-mm-dd",
   regional: "ko",
   beforeShowDay: available

  });

});
</script>


그래서 이걸 제가 설정한 날짜만 선택이 안되도록 아래 처럼 바꿔봤는데, 또 작동되지 않네요.

<script>
$(function() {
 $(".datetimepicker").datetimepicker({
     showMonthAfterYear:true,
     monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
     showAnimation: 'slider',
     dateFormat: 'yy-mm-dd',
     showOtherMonths: true,
     selectOtherMonths: true,
     changeMonth: true,
     changeYear: true
 });
});

$(function() {

// 제외할 날짜
var disabledDays = ["2023-09-26", "2023-09-27"];

// 특정일 선택막기
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}


$('.datetimepicker').datetimepicker({
   dateFormat: "yy-mm-dd",
   regional: "ko",
   beforeShowDay: disableAllTheseDays

  });

});
</script>

위에거가 된거보면 아랫것도 될거 같은데, 혹시 여기서 뭔가 조금만 더 수정해 보면 되지 않을까요?

    onShow: function (ct) {
        this.setOptions({
            minDate: "<?php echo 'G5_TIME_YMD';?>",
            maxDate: jQuery('#edate').val() ? jQuery('#edate').val() : false,
            disabledDates: ['2023-09-26', '2023-09-27', '2023-09-30']
        });
이렇게 변경해보세요

친절하신 답변 감사합니다.
본문에 제 소스를 아래처럼 바꾸라는 말씀이신가요?


	$('#sdate').datetimepicker({
		allowTimes:at,
		timepicker:false,
		format:	'Y-m-d',
		onClose:function(ct,$i){
		  if($("#sdate").val() != "" && $("#edate").val() != "") {		  	
			GoPayCheck();
		  }
		},onShow:function( ct ){
   this.setOptions({
   minDate:"<?php echo 'G5_TIME_YMD';?>",
    maxDate: jQuery('#edate').val() ? jQuery('#edate').val() : false,
    disabledDates: ['2023-09-26', '2023-09-27', '2023-09-30']
   })
  }
	});

	$('#edate').datetimepicker({
		allowTimes:at,
		timepicker:false,
		format:	'Y-m-d',
		onClose:function(ct,$i){
		  if($("#sdate").val() != "" && $("#edate").val() != "") {		  	
			GoPayCheck();			
		  }
		},onShow:function( ct ){
   this.setOptions({
    minDate:jQuery('#sdate').val()?jQuery('#sdate').val():"<?php echo 'G5_TIME_YMD';?>"
   })
  }
	});


disabledDates: ['2023-09-26', '2023-09-27', '2023-09-30']
만 추가하면 아무런 변화 없고,
무언가 더 추가를 해줘야 할거 같은데

// 특정일 선택막기
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}
이런거 추가해도 변함 없고, 잘 모르겠습니다.

네. 아래 방법으로 해결하였습니다.


	$(function() {
	      $(".datetimepicker").datetimepicker({
		 showMonthAfterYear:true,
		 monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		 dayNamesMin: ['일','월','화','수','목','금','토'],
		 showAnimation: 'slider',
		 dateFormat: 'yy-mm-dd',
		 showOtherMonths: true,
		 selectOtherMonths: true,
		 changeMonth: true,
		 changeYear: true,

		 beforeShowDay: disableAllTheseDays	
	     });
	});

	var disabledDays = ['2023-09-26', '2023-09-27', '2023-09-30'];

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

	}

답변을 작성하시기 전에 로그인 해주세요.
전체 139
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT