Calendar Date Picker

snippet.publishedOn August 18, 2025 Advanced

A user-friendly calendar and date picker component for forms and booking systems.

Live Preview

Code Implementation

HTML

<div class="calendar-container">
  <div class="calendar-header">
    <button id="prev-month">&lt;</button>
    <h2 id="month-year"></h2>
    <button id="next-month">&gt;</button>
  </div>
  <div class="calendar-weekdays">
    <div>Sun</div>
    <div>Mon</div>
    <div>Tue</div>
    <div>Wed</div>
    <div>Thu</div>
    <div>Fri</div>
    <div>Sat</div>
  </div>
  <div class="calendar-grid" id="calendar-grid"></div>
  <div class="selected-date-container">
    <input type="text" id="selected-date" placeholder="YYYY-MM-DD" readonly>
    <button id="clear-date">Clear</button>
  </div>
</div>

CSS

.calendar-container {
  width: 100%;
  max-width: 320px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  font-family: sans-serif;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  color: #777;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-grid div {
  text-align: center;
  padding: 10px 5px;
  cursor: pointer;
  border-radius: 4px;
}

.calendar-grid .day:hover {
  background-color: #f0f0f0;
}

.calendar-grid .day.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.calendar-grid .today {
  background-color: #ffc107;
  color: #fff;
}

.calendar-grid .selected {
  background-color: #007bff;
  color: white;
}

.selected-date-container {
  display: flex;
  margin-top: 15px;
}

#selected-date {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#clear-date {
  background: #f44336;
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

#clear-date:hover {
  background: #d32f2f;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const monthYearElement = document.getElementById('month-year');
  const calendarGrid = document.getElementById('calendar-grid');
  const prevMonthBtn = document.getElementById('prev-month');
  const nextMonthBtn = document.getElementById('next-month');
  const selectedDateInput = document.getElementById('selected-date');
  const clearDateBtn = document.getElementById('clear-date');
  let currentDate = new Date();

  function renderCalendar() {
    const month = currentDate.getMonth();
    const year = currentDate.getFullYear();
    monthYearElement.textContent = `${currentDate.toLocaleString('en-US', { month: 'long' })} ${year}`;
    calendarGrid.innerHTML = '';

    const firstDayOfMonth = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const today = new Date();

    for (let i = 0; i < firstDayOfMonth; i++) {
      calendarGrid.innerHTML += '<div></div>';
    }

    for (let i = 1; i <= daysInMonth; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;
      dayElement.classList.add('day');
      const date = new Date(year, month, i);

      if (date < today.setHours(0,0,0,0)) {
        dayElement.classList.add('disabled');
      }

      if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
        dayElement.classList.add('today');
      }

      dayElement.addEventListener('click', () => {
        if (!dayElement.classList.contains('disabled')) {
          const selectedDate = new Date(year, month, i);
          selectedDateInput.value = selectedDate.toISOString().split('T')[0];
          document.querySelectorAll('.day').forEach(d => d.classList.remove('selected'));
          dayElement.classList.add('selected');
        }
      });
      calendarGrid.appendChild(dayElement);
    }
  }

  prevMonthBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
  });

  nextMonthBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
  });

  clearDateBtn.addEventListener('click', () => {
    selectedDateInput.value = '';
    document.querySelectorAll('.day').forEach(d => d.classList.remove('selected'));
  });

  renderCalendar();
});