Package Exports

re-date-range-picker
re-date-range-picker/dist/index.cjs.js
re-date-range-picker/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (re-date-range-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Tailwindcss Datepicker

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

Features
Documentation
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

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

// 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:

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

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

    return (
        <>
            <Datepicker value={value} onChange={newValue => 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:

# Using npm
npm install && npm dev

# Using yarn
yarn install && yarn dev

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

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

JSPM

re-date-range-picker