Home
SHARIFUL ISLAM
Custom Date Picker with TailwindCSS and Vanilla JavaScript

Custom Date Picker with TailwindCSS and Vanilla JavaScript

A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

This tailwind example is contributed by SHARIFUL ISLAM, on 24-Aug-2025. Component is made with Tailwind CSS v3. It is responsive.

Input

Author SHARIFUL ISLAM

695

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Date Picker</title>
    <script src="script.js" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="space-y-2.5 relative w-[280px]" id="date-picker">
      
      <label class="text-black/70 text-sm">Select Date</label>

<div class="relative">
        <div
          id="date-input-wrapper"
          class="flex items-center border rounded-md py-3 px-3.5 min-w-min border-black/10 bg-white shadow-sm text-black-70 relative cursor-pointer"
        >
          <input
            id="date-input"
            type="text"
            placeholder="DD/MM/YYYY"
            readonly
            class="w-full bg-transparent outline-none text-black-70 text-base select-none"
          />
          <div
            class="bg-gray-100 h-full w-10 flex items-center justify-center rounded-md absolute right-0"
          >
            
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 text-purple-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6.75 3v2.25M17.25 3v2.25M3 9h18M4.5 7.5v12.75A2.25 2.25 0 006.75 22.5h10.5a2.25 2.25 0 002.25-2.25V7.5"
              />
            </svg>
          </div>
        </div>

<div
          id="calendar"
          class="hidden absolute border border-black/10 z-50 mt-1 bg-white shadow-lg rounded-md min-w-[280px] p-5 top-full"
        >
          
          <div class="flex justify-between items-center mb-4">
            <button
              id="prev-month"
              type="button"
              class="p-1 border border-black/10 rounded-md hover:bg-gray-100"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-black-70"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="1.5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.75 19.5L8.25 12l7.5-7.5"
                />
              </svg>
            </button>

<div
              id="calendar-month"
              class="text-center font-semibold text-black-80 text-base"
            >
              August 2025
            </div>

<div class="grid grid-cols-7 text-center text-sm font-medium mb-2">
            <div>Su</div>
            <div>Mo</div>
            <div>Tu</div>
            <div>We</div>
            <div>Th</div>
            <div>Fr</div>
            <div>Sa</div>
          </div>

<div id="calendar-days" class="grid grid-cols-7 text-center text-sm">
            
          </div>

<div class="flex justify-end mt-2">
            <button
              id="today-btn"
              type="button"
              class="bg-purple-500 px-2 py-1 text-white rounded-sm text-xs hover:bg-purple-600"
            >
              Today
            </button>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
  const inputWrapper = document.getElementById("date-input-wrapper");
  const input = document.getElementById("date-input");
  const calendar = document.getElementById("calendar");
  const daysContainer = document.getElementById("calendar-days");
  const monthLabel = document.getElementById("calendar-month");
  const prevBtn = document.getElementById("prev-month");
  const nextBtn = document.getElementById("next-month");
  const todayBtn = document.getElementById("today-btn");

let currentDate = new Date();

// Toggle calendar
  inputWrapper.addEventListener("click", () => {
    calendar.classList.toggle("hidden");
  });

// Close on outside click
  document.addEventListener("click", (e) => {
    if (!inputWrapper.contains(e.target) && !calendar.contains(e.target)) {
      calendar.classList.add("hidden");
    }
  });

// Render calendar
  function renderCalendar(date) {
    daysContainer.innerHTML = "";

const year = date.getFullYear();
    const month = date.getMonth();

// First day of month
    const firstDay = new Date(year, month, 1);
    const startingDay = firstDay.getDay();

// Days in month
    const daysInMonth = new Date(year, month + 1, 0).getDate();

// Month label
    const monthNames = [
      "January","February","March","April","May","June",
      "July","August","September","October","November","December"
    ];
    monthLabel.textContent = `${monthNames[month]} ${year}`;

// Fill empty slots before start
    for (let i = 0; i < startingDay; i++) {
      const empty = document.createElement("div");
      daysContainer.appendChild(empty);
    }

// Fill actual days
    for (let d = 1; d <= daysInMonth; d++) {
      const btn = document.createElement("button");
      btn.textContent = d;
      btn.className =
        "p-2 w-10 h-10 rounded-md hover:bg-gray-100 transition-colors";

const today = new Date();
      if (
        d === today.getDate() &&
        month === today.getMonth() &&
        year === today.getFullYear()
      ) {
        btn.classList.add("bg-purple-500", "text-white", "font-semibold");
      }

btn.addEventListener("click", () => {
        const selected = new Date(year, month, d);
        const formatted = selected
          .toLocaleDateString("en-GB")
          .replace(/\//g, "/"); // DD/MM/YYYY
        input.value = formatted;
        calendar.classList.add("hidden");
      });

daysContainer.appendChild(btn);
    }
  }

// Prev & Next month buttons
  prevBtn.addEventListener("click", () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
  });

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

// Today button
  todayBtn.addEventListener("click", () => {
    const today = new Date();
    input.value = today.toLocaleDateString("en-GB").replace(/\//g, "/");
    currentDate = today;
    renderCalendar(currentDate);
    calendar.classList.add("hidden");
  });

// Initial render
  renderCalendar(currentDate);
});

</script>
  </body>
</html>

Related Examples