DEV Community 👩‍💻👨‍💻

Cover image for Tailwind CSS Datepicker
Zoltán Szőgyényi for Themesberg

Posted on • Updated on • Originally published at flowbite.com

Tailwind CSS Datepicker

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
Enter fullscreen mode Exit fullscreen mode

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

import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';
Enter fullscreen mode Exit fullscreen mode

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
}); 
Enter fullscreen mode Exit fullscreen mode

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

import DateRangePicker from '@themesberg/tailwind-datepicker/DateRangePicker';
Enter fullscreen mode Exit fullscreen mode

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
}); 
Enter fullscreen mode Exit fullscreen mode

Documentation

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.

License

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

Top comments (6)

Collapse
 
krimotemam profile image
Krimo

Hey, great article !! How can I use that with react ??

Collapse
 
rosnaib11 profile image
req

+1

Collapse
 
danielfrombitpack profile image
Daniel Körtvélyessy

Szia Zoltán :D

I have tried to install the Datepicker via npm which went well. However I am struggling that the refresh method does not seems to "change" the input field. The date is shown in the input field however upon submission of the form the value is empty.

I am using a Laravel 9 with Breeze & Alpinejs on a current local dev env

Originally the input field is with a blade component, however the issue does not change if I move the Datepicker directly into the view.

Köszi szépen,
Daniel

Collapse
 
ndrean profile image
NDREAN

Where are the controls? Once installed via npm, I only see the form, and can't find any documentation?

Collapse
 
salmannausher profile image
Salman Nausher

In which file we have to import this "import DateRangePicker from '@themesberg/tailwind-datepicker/DateRan"
I am building a rails application

Collapse
 
zolidev profile image
Zoltán Szőgyényi Author

If you're using something like Webpack where you can import JS modules then you should do that in a JavaScript file.

If you want a more simple way of doing it you can just include the Flowbite CDN file and then use the datepicker with data attributes.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.