게시판 글쓰기에 상단영역에 다이어리처럼 달력을 넣어봐요 (이미지참고) > 그누보드5 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누보드5 팁자료실

게시판 글쓰기에 상단영역에 다이어리처럼 달력을 넣어봐요 (이미지참고) 정보

게시판 글쓰기에 상단영역에 다이어리처럼 달력을 넣어봐요 (이미지참고)

본문

3551726514_1700013604.289.png

 

wr_1 여분필드에 들어갑니다. 

 

 

 

 <span class="write_sv"> 일정</span>



 

          <!-- <input> 요소 추가 -->

  <div class="write_div" style="text-align: right;">

    <label for="wr_1" class="sound_only">날짜<strong>필수</strong></label>

    <input type="text" name="wr_1" id="wr_1" value="<?php echo $wr_1 ?>" required class="frm_input full_input required" maxlength="20" placeholder="날짜"  readonly>

  </div>

 

        <div class="calendar" id="calendar">

            <div class="calendar_list">

    <!-- 이전 달 버튼 -->

    <button class="prev" id="prevMonth" type="button">◁ </button>

    <!-- 현재 월 표시 -->

    <span class="current-month" id="currentMonth"></span>

    <!-- 다음 달 버튼 -->

    <button class="next" id="nextMonth" type="button">▷</button>

        </div>

    <div class="days-header">

      <span class="day-name">일</span>

      <span class="day-name">월</span>

      <span class="day-name">화</span>

      <span class="day-name">수</span>

      <span class="day-name">목</span>

      <span class="day-name">금</span>

      <span class="day-name">토</span>

    </div>

    <div id="calendarBody"></div>

  </div>

 

  <script>

    const calendarBody = document.getElementById("calendarBody");

    const today = new Date();

    const inputElement = document.getElementById("wr_1");

    const currentMonthLabel = document.getElementById("currentMonth");

 

    function createCalendar(year, month) {

      calendarBody.innerHTML = "";

 

      const firstDay = new Date(year, month, 1);

      const lastDay = new Date(year, month + 1, 0);

 

      const daysInMonth = lastDay.getDate();

      const startingDay = firstDay.getDay();

 

      for (let i = 0; i < startingDay; i++) {

        const dayElement = document.createElement("div");

        dayElement.classList.add("day", "empty");

        calendarBody.appendChild(dayElement);

      }

 

      for (let day = 1; day <= daysInMonth; day++) {

        const dayElement = document.createElement("div");

        dayElement.textContent = day;

        dayElement.classList.add("day");

 

        if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {

          dayElement.classList.add("today");

        }

 

        dayElement.addEventListener("click", () => {

          const selectedDay = document.querySelector(".day.selected");

          if (selectedDay) {

            selectedDay.classList.remove("selected");

          }

          dayElement.classList.add("selected");

 

          // 선택한 날짜를 <input> 요소에 할당

          inputElement.value = `${year}-${month + 1}-${day}`;

        });

 

        calendarBody.appendChild(dayElement);

      }

    }

 

    function updateCurrentMonthLabel(year, month) {

      const monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];

      currentMonthLabel.textContent = `${year}년 ${monthNames[month]}`;

    }

 

    createCalendar(today.getFullYear(), today.getMonth());

    updateCurrentMonthLabel(today.getFullYear(), today.getMonth());

 

    // 이전 달 버튼 클릭 이벤트 처리

    document.getElementById("prevMonth").addEventListener("click", () => {

      const currentYear = today.getFullYear();

      const currentMonth = today.getMonth();

      if (currentMonth === 0) {

        today.setFullYear(currentYear - 1, 11);

      } else {

        today.setMonth(currentMonth - 1);

      }

      createCalendar(today.getFullYear(), today.getMonth());

      updateCurrentMonthLabel(today.getFullYear(), today.getMonth());

    });

 

    // 다음 달 버튼 클릭 이벤트 처리

    document.getElementById("nextMonth").addEventListener("click", () => {

      const currentYear = today.getFullYear();

      const currentMonth = today.getMonth();

      if (currentMonth === 11) {

        today.setFullYear(currentYear + 1, 0);

      } else {

        today.setMonth(currentMonth + 1);

      }

      createCalendar(today.getFullYear(), today.getMonth());

      updateCurrentMonthLabel(today.getFullYear(), today.getMonth());

    });

  </script>

 

 

스타일시트 

/* Default styling for larger screens */
.calendar {
    width: 100%;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .calendar-header button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  .current-month {
    font-size: 18px;
    font-weight: bold;padding: 0 50px;
  }
  
  .days-header {
    display: flex;
    justify-content: space-between;
    background-color: rgb(95, 0, 128);
    color: #fff;
    font-weight: bold;
    text-align: center;
    }
  
  .day-name {
    flex: 1;
    padding: 10px;
    font-size: 14px; /* Adjust the font size for day names as needed */
  }
  
  .day {
    display: inline-block;
    width: 13.7%;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    margin: 5px 2px;
    font-size: 1.2rem;
    flex: 1;
    }
  
  .day.empty {
    visibility: hidden;
  }
  
  .day.selected {
    background-color: rgb(95, 0, 128);
    color: #fff;
    }
  
  .day.today {
    color: #3a8afd;
    }
  

추천
7

댓글 3개

전체 2,454 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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