A Tailwind CSS datepicker built with vanilla JavaScript

  • By Themesberg
  • Last update: Dec 20, 2022
  • Comments: 3

Tailwind CSS Datepicker

This project is a free and open source datepicker library which uses the utility-first classes from Tailwind and the JavaScript from another open source library called Vanilla JS Datepicker.

This Tailwind CSS Datepicker is part of a larger library of components and interactive elements called Flowbite. Although it can also be used independently from the main library, we encourage you to check out the whole Tailwind components library from Flowbite.

Tailwind CSS Datepicker

Getting started

If you want to use the Tailwind Datepicker plugin using JavaScript you will need to include it into your project via NPM:

npm i @themesberg/tailwind-datepicker --save

After you've installed the NPM library, you will need to import the Datepicker module:

import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';

Initialize a new element using the Datepicker constructor and optionally add custom options based on your needs:

const datepickerEl = document.getElementById('datepickerId');
new Datepicker(datepickerEl, {
    // options

If you want to use the Tailwind Date Range Picker you have to import the DateRangePicker module:

import DateRangePicker from '@themesberg/tailwind-datepicker/DateRangePicker';

Then in the same fashion you can initalize a date range picker component by using the DateRangePicker constructor:

const dateRangePickerEl = document.getElementById('dateRangePickerId');
new DateRangePicker(datepickerEl, {
    // options


Check out the official Tailwind CSS Datepicker Documentation page to learn how to get started by installing and then using this library in your project.

Upgrade to pro

There is also a pro version of FlowBite available featuring more components, an application UI layout, marketing UI pages, e-commerce pages and also Figma design files.

Check it out here: flowbite.com


The Tailwind CSS Datepicker is open-source under the MIT License. Find out more by clicking here.


If you want to help support this project you can send us Bitcoin or Ethereum to the following addresses:

  • Bitcoin address: bc1qmxvck7jnvwmv0z9xv4lcjsf05dja973v2pn7f5
  • Ethereum address: 0xcb97e23EBc2262B2ba93bfC5d1e423e08420cAF6

The money will be used to pay for the hosting plan and other costs that are included to maintain this project.




  • 1

    NPM import does not work in Laravel 9.19

    It works normally through CDN links but it does not work when I try to import it through npm. I followed the installation instructions, download and add the import declaration in "app.js", with the other packages, but I keep getting "Uncaught ReferenceError: Datepicker is not defined at :1:1".

    My development environment is Laravel 9.19 and has Boxicons and Flowbite, both installed the same way and they work normally.

  • 2

    TodayBtn does not work

    It looks like the today button doesn't do anything; see https://flowbite.com/docs/plugins/datepicker/#action-buttons

    I've tried Chrome and Firefox on Win 10, neither works.

  • 3

    TodayHighlight rendering is not working correctly

    When using the standalone js import, the todayHighlight rendering (class?) is broken after selecting any other date:

    image image

    Here's how I'm using the plugin:

    import { Alpine } from "alpinejs";
    import FlowbiteDatepicker from "flowbite-datepicker/Datepicker";
    export const Datepicker = (Alpine: Alpine) =>
      Alpine.directive("datepicker", (el: Element) =>
        new FlowbiteDatepicker(el, {
          // todayBtn: true,
          // todayBtnMode: 1,
          todayHighlight: true,
          clearBtn: true,
          format: "dd/mm/yyyy",