자바스크립트로 날짜 선택기(Date Picker) 직접 만들기 – 라이브러리 없이 구현하는 방법

 

🧭 왜 직접 날짜 선택기를 만들어야 할까?

 

대부분의 웹 프로젝트에서는 날짜 입력이 필요한 경우가 많습니다.

 

물론 input [type="date"] 를 사용할 수도 있지만,

 

브라우저마다 디자인이 다르고 커스터마이징이 어렵다는 단점이 있죠.

 

그래서 이번 글에서는 순수 자바스크립트로 날짜 선택기 UI를 직접 구현해 보겠습니다.

 

🛠️ 구현 목표

• 달력 UI를 동적으로 생성
• 현재 월 기준으로 날짜 표시
• 이전/다음 달 이동 기능
• 날짜 클릭 시 선택된 날짜 출력

 

 

🧱 HTML 구조

 

<div class="datepicker">
  <div class="header">
    <button id="prev">◀</button>
    <span id="month-year"></span>
    <button id="next">▶</button>
  </div>
  <table id="calendar">
    <thead>
      <tr>
        <th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
<p>선택한 날짜: <span id="selected-date">없음</span></p>

 

 

🎨 CSS 스타일 (간단 버전)

 

.datepicker {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  font-family: sans-serif;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#calendar td {
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
#calendar td:hover {
  background-color: #f0f0f0;
}
.selected {
  background-color: #007bff;
  color: white;
}

 

 

⚙️ 자바스크립트 로직

 

const calendarBody = document.querySelector("#calendar tbody");
const monthYear = document.getElementById("month-year");
const selectedDate = document.getElementById("selected-date");

let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();

function renderCalendar(month, year) {
  calendarBody.innerHTML = "";
  const firstDay = new Date(year, month, 1).getDay();
  const lastDate = new Date(year, month + 1, 0).getDate();

  monthYear.textContent = `${year}년 ${month + 1}월`;

  let row = document.createElement("tr");
  for (let i = 0; i < firstDay; i++) {
    row.appendChild(document.createElement("td"));
  }

  for (let day = 1; day <= lastDate; day++) {
    if (row.children.length === 7) {
      calendarBody.appendChild(row);
      row = document.createElement("tr");
    }
    const cell = document.createElement("td");
    cell.textContent = day;
    cell.addEventListener("click", () => {
      document.querySelectorAll("#calendar td").forEach(td => td.classList.remove("selected"));
      cell.classList.add("selected");
      selectedDate.textContent = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
    });
    row.appendChild(cell);
  }
  calendarBody.appendChild(row);
}

document.getElementById("prev").addEventListener("click", () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar(currentMonth, currentYear);
});

document.getElementById("next").addEventListener("click", () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar(currentMonth, currentYear);
});

renderCalendar(currentMonth, currentYear);

 

 

🔍 SEO 최적화를 위한 팁

• 타깃 키워드: 자바스크립트 날짜 선택기, Date Picker, 달력 UI, JS 달력 만들기
• H1~H3 태그 구조화: 검색엔진이 콘텐츠 구조를 쉽게 파악할 수 있도록 구성
• 이미지 ALT 태그: 코드 결과를 캡처해 이미지로 첨부 시 alt="자바스크립트 달력 UI 예시" 등으로 설명 추가
• 내부 링크: 관련 글이 있다면 연결 (예: 모달, 토스트 알림 등)
• 외부 링크: MDN 문서나 공식 JS 문서 링크 활용

 

 

🧩 마무리

 

이렇게 직접 만든 날짜 선택기는 디자인 커스터마이징이 자유롭고, 기능 확장도 용이합니다.

 

예를 들어 날짜 범위 선택, 주말 비활성화, 오늘 날짜 강조 등도 추가할 수 있어요.

 

이 글이 도움이 되셨다면 댓글이나 공감 부탁드려요! 😊

 

다음 글에서는 시간 선택기(Time Picker)도 만들어볼까요?