React Tailwindcss Datepicker

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

Contents

- Features
- Documentation
- Supported versions
- Installation
- Simple Usage
- Theming Options
- Playground
- Contributing

Features

- ✅ Theming options
- ✅ Dark mode
- ✅ Single Date
- ✅ Single date use Range
- ✅ Shortcuts
- ✅ TypeScript support
- ✅ Localization(i18n)
- ✅ Date formatting
- ✅ Disable specific dates
- ✅ Minimum Date and Maximum Date
- ✅ Custom shortcuts

Documentation

Go to full documentation

⚠️ Supported versions

Only react-tailwindcss-datepicker versions greater than or equal to 1.7.4 receive bug fixes and new features. The table below lists compatibility with the different react versions:

| Version | React Version |
|----------------------------------------------------------------------------|---------------|
| 2.x | 19.x |
| 1.x | 17.x, 18.x |

Installation

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

$3

``
npm install react-tailwindcss-datepicker
`

$3

`
yarn add react-tailwindcss-datepicker
`

$3

`
yarn add react-tailwindcss-datepicker@1.7.3
`

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

`
"dayjs": "^1.11.12",
"react": "^17.0.2 || ^18.2.0" || "^19.0.0"
`

Simple Usage

#### Tailwindcss Configuration

Add the datepicker to your tailwind configuration using this code

`javascript
// in your tailwind.config.js
module.exports = {
// ...
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
]
// ...
};
`

Then use react-tailwindcss-select in your app:

`tsx
import { useState } from "react";
import Datepicker from "react-tailwindcss-datepicker";

const App = () => {
const [value, setValue] = useState({
startDate: null,
endDate: null
});

return (
<>
setValue(newValue)} />

);
};

export default App;
`

Theming options

Light Mode

!Light Mode

Dark Mode

!Dark Mode

Supported themes
!Theme supported

Teal themes example
!Theme supported

You can find the demo at here

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

PlayGround

Clone the master branch and run commands:

`sh


Using npm

`

Open a browser and navigate to http://localhost:8888`

Contributing

See
CONTRIBUTING.md

Official Documentation repo

https://github.com/onesine/react-tailwindcss-datepicker-doc

Thanks to

- 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.