이 소스에서 특정 날짜 선택 제한 하는거 가능할까요?
본문
안녕하세요.
아래는 제가 사용하는 소스중 일부입니다.
날짜 선택관련인데,
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').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 적용이 안되어서 적용이 안되는듯 한데 확인 해보세요
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']
});
이렇게 변경해보세요