tailwind-datepicker-custom

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

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 tailwind-datepicker-custom --save

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

import Datepicker from 'tailwind-datepicker-custom/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 'tailwind-datepicker-custom/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
}); 

Documentation

License

The Tailwind CSS Datepicker is open-source under the MIT License.