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

132

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

Maintenance mode

Author:
Maxim

1 year ago

3.6k
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.4k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

5 months ago

267
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
Upload file input field

Author:
Gopi Yadav

2 years ago

14.5k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.9k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

7 months ago

1.3k
Login Form with Icon

Author:
Prashant

3 years ago

17.3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.1k
Login Form with Icon

Author:
Akai

2 weeks ago

40
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

16.8k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

27.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components