달력관련 질문입니다.

달력관련 질문입니다.

QA

달력관련 질문입니다.

본문

안녕하세요

datepicker 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multidatespicker/1.6.6/jquery-ui.multidatespicker.min.js"></script>

 

아래 처럼 구현할려고 합니다.

전체적으로 타임 리스트는 되는되요

그림처럼 날자 비교해서 휴무일 있을 경우 휴무일 표시 할 려고 합니다.

검토 부탁드립니다.

이미지

3542495277_1714647486.8451.png

 


$(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();
});

이 질문에 댓글 쓰기 :

답변 1

https://sir.kr/g5_skin/19684
여기 스킨을 참고로 해서 봐 보세요

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

회원로그인

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