달력관련 질문입니다.
본문
안녕하세요
datepicker
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.min.js"></script>
아래 처럼 구현할려고 합니다.
전체적으로 타임 리스트는 되는되요
그림처럼 날자 비교해서 휴무일 있을 경우 휴무일 표시 할 려고 합니다.
검토 부탁드립니다.
이미지
$(function () {
$(".datepicker99").datepicker({
dateFormat: "yy-mm-dd",
duration: "fast",
closeText: "닫기",
currentText: "오늘",
prevText: "이전 달",
nextText: "다음 달",
monthNames: [
"1월",
"2월",
"3월",
"4월",
"5월",
"6월",
"7월",
"8월",
"9월",
"10월",
"11월",
"12월",
],
monthNamesShort: [
"1월",
"2월",
"3월",
"4월",
"5월",
"6월",
"7월",
"8월",
"9월",
"10월",
"11월",
"12월",
],
dayNames: ["일", "월", "화", "수", "목", "금", "토"],
dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"],
weekHeader: "주",
yearSuffix: "년",
minDate: 0,
showMonthAfterYear: true, //년도 먼저 나오고, 뒤에 월 표시
showOtherMonths: true,
selectOtherMonths: true,
onChangeMonthYear: function (year, month, inst) {
setTimeout(function () {
timeSelect();
monthText();
reserPopupOpen();
}, 0);
},
});
//비활성화할 날짜 배열
// function highlightRedDates(date) {
// var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
// return [false, " ui-state-disabled", string]; // 모든 날짜를 비활성화
// }
function highlightRedDates(date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
if (date >= today) {
var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
if (date == "2024-05-06") {
return [false, " ui-state-disabled ", string];
} else {
return [false, " ui-state-disabled show-timeSelect", string];
}
} else {
return [false, " ui-state-disabled", ""];
}
}
$(".datepicker99").multiDatesPicker({
beforeShowDay: highlightRedDates,
});
});
function timeSelect() {
var holidaylist = `
<span>어린이 날 대체 공휴일</span>
`;
var timeList = `
<div class="timelist flex-box align-items-center gap-5 flex-column" style="height:122px; overflow-y:auto;">
<!--
예약 상태에 따라 클래스 변경 부탁드립니다.
예약 마감 reserv-deadline
예약 가능 reserv-available
-->
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-available">
10:00 ~ 10:50
<span>(0/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-available">
11:00 ~ 11:50
<span>(0/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-deadline">
12:00 ~ 12:50
<span>(1/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-available">
13:00 ~ 13:50
<span>(0/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-deadline">
14:00 ~ 14:50
<span>(1/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-deadline">
15:00 ~ 15:50
<span>(1/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-deadline">
16:00 ~ 16:50
<span>(1/1)</span>
</button>
<button type="button" class="reserv-time-btn flex-box align-items-center justify-content-between reserv-deadline">
17:00 ~ 17:50
<span>(1/1)</span>
</button>
</div>
`;
// "2024-05-06" 날짜에 대한 특별한 처리를 추가합니다.
if (
$(
".reserv-datepicker .ui-datepicker-calendar tbody td.ui-state-disabled.show-holiday:not(.ui-datepicker-other-month)"
).length === 0
) {
$(
".reserv-datepicker .ui-datepicker-calendar tbody td.ui-state-disabled.show-holiday:not(.ui-datepicker-other-month)"
).append(holidaylist);
}
$(
".consulting2.reserv-datepicker .ui-datepicker-calendar tbody td.ui-state-disabled.show-timeSelect:not(.ui-datepicker-other-month)"
).append(timeList);
$(
".reserv-datepicker .interview-roomA .ui-datepicker-calendar tbody td.ui-state-disabled.show-timeSelect:not(.ui-datepicker-other-month)"
).append(timeList);
}
function rentalData(data) {
// td 요소를 선택합니다.
var tdElement = document.querySelector("td.ui-datepicker-days-cell-over");
// title 속성에서 날짜 데이터를 가져옵니다.
var str = tdElement.getAttribute("title");
console.log("string data : ", data);
// 가져온 날짜 데이터를 출력합니다.
console.log("title data : ", str);
}
//데이트피커 월 텍스트 수정
function monthText() {
// 월 텍스트 가져오기
var originalText = $(
".consulting2.reserv-datepicker .ui-datepicker-title .ui-datepicker-month"
).text();
var monthOnly = originalText.replace(/[0-9]/g, ""); // 숫자를 제거하여 '월'만 가져오기
var originalText2 = $(
".rental-reserv.reserv-datepicker .interview-roomA .ui-datepicker-title .ui-datepicker-month"
).text();
var monthOnly2 = originalText2.replace(/[0-9]/g, ""); // 숫자를 제거하여 '월'만 가져오기
var originalText3 = $(
".rental-reserv.reserv-datepicker .interview-roomB .ui-datepicker-title .ui-datepicker-month"
).text();
var monthOnly3 = originalText3.replace(/[0-9]/g, ""); // 숫자를 제거하여 '월'만 가져오기
// '월'만 폰트 크기 변경
$(
".consulting2.reserv-datepicker .ui-datepicker-title .ui-datepicker-month"
).html(originalText.replace("월", `<span style="font-size:2rem">월</span>`));
$(
".rental-reserv.reserv-datepicker .interview-roomA .ui-datepicker-title .ui-datepicker-month"
).html(originalText2.replace("월", `<span style="font-size:2rem">월</span>`));
$(
".rental-reserv.reserv-datepicker .interview-roomB .ui-datepicker-title .ui-datepicker-month"
).html(originalText3.replace("월", `<span style="font-size:2rem">월</span>`));
}
//달력 예약 시간 클릭시 팝업
function reserPopupOpen() {
$(".reserv-time-btn.reserv-available").on("click", function () {
openPopup("#reservationPopup", "normal");
openPopup("#rentalPopupA", "normal");
openPopup("#rentalPopupB", "normal");
});
$(".reserv-time-btn.reserv-deadline").on("click", function () {
alert("예약이 마감된 시간입니다. 다른 시간을 선택해주세요.");
});
}
$(document).ready(function () {
timeSelect();
monthText();
reserPopupOpen();
});
답변을 작성하시기 전에 로그인 해주세요.
