React Tailwindcss Datepicker

A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.

Features

• ✅ Theming options
• ✅ Dark mode
• ✅ Single Date
• ✅ Single date use Range
• ✅ Shortcuts
• ✅ TypeScript support
• ✅ Localization(i18n)
• ✅ Date formatting
• ⬜ Disable specific dates
• ⬜ Custom shortcuts

Documentation

Go to full documentation

Installation

⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the @tailwindcss/forms plugin) & Dayjs under the hood to work.

Install via npm

$ npm install react-tailwindcss-datepicker 

Install via yarn

$ yarn add react-tailwindcss-datepicker 

Make sure you have installed the peer dependencies as well with the below versions.

"dayjs": "^1.11.6",
"react": "^17.0.2 || ^18.2.0"

Simple Usage

Tailwindcss Configuration

Add the datepicker to your tailwind configuration using this code

1// in your tailwind.config.js
2module.exports = {
3    // ...
4    content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
5    // ...
6}

Then use react-tailwindcss-select in your app:

1import React, {useState} from "react";
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => {
5    const [value, setValue] = useState({
6        startDate: new Date(),
7        endDate: new Date().setMonth(11)
8    });
9    
10    const handleValueChange = (newValue) => {
11        console.log("newValue:", newValue);
12        setValue(newValue);
13    }
14    
15    return (
16        <div>
17            <Datepicker
18                value={value}
19                onChange={handleValueChange}
20            />
21        </div>
22    );
23};
24
25export default App;

Theming options

Light Mode

Dark Mode

Supported themes

Teal themes example

You can find the demo at here

Info

👉 To discover the other possibilities offered by this library, you can consult the full documentation.

Contributing

Got ideas on how to make this better? Open an issue!

Thanks to

• Litepie Datepicker
• Vue Tailwind Datepicker
• React
• Tailwind CSS
• dayjs

I thank you in advance for your contribution to this project.

License

MIT Licensed. Copyright (c) Lewhe Onesine 2022.