Tailwind Date Picker

A lightweight, dependency-free, and customizable date picker component built with Tailwind CSS and vanilla JavaScript. Perfect for modern web applications that want to avoid heavy date picker libraries.

Features

• 📅 Vanilla JS – no jQuery or frameworks required.
• 🎨 Tailwind CSS for styling – fully customizable.
• 📆 Single-date selection support.
• 🔧 Configurable input targeting.
• 🧠 Intelligent calendar generation (month navigation, date selection, etc.).
• 🖱 Click-outside-to-close behavior.

Demo

Installation

1. Make sure Tailwind CSS is included in your project or using npm

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   

2. Add a date input in your HTML:

<input type="text" id="datepicker" readonly class="border p-2 rounded" />

3. Initialize the date picker in your script:

<script>
  new TailwindDatePicker("#datepicker");
</script>

Options

Currently, the date picker takes a single parameter — a selector for the input element you want to bind.

new TailwindDatePicker("#my-input");

More configuration options (like min/max date, date format, range selection) may be added in future versions.

Styling

This component uses Tailwind CSS classes for styling. Make sure Tailwind is loaded in your project for it to render properly.

You can customize styles by editing the class names inside TailwindDatePicker.js.

Browser Support

• Modern browsers (Chrome, Firefox, Edge, Safari)
• No IE support (by design)

License

MIT License

Contributing

Feel free to fork, tweak, and submit pull requests.

Happy hacking! 🚀