Package Exports

react-tlwind-datepicker
react-tlwind-datepicker/dist/index.cjs.js
react-tlwind-datepicker/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 (react-tlwind-datepicker) 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

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

Install via npm

$ npm install react-tlwind-datepicker

Install via yarn

$ yarn add react-tlwind-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-tlwind-datepicker/dist/index.esm.js"
    ]
    // ...
};

Then use react-tailwindcss-select in your app:

import React, { useState } from "react";
import Datepicker from "react-tlwind-datepicker";

const App = () => {
    const [value, setValue] = useState({
        startDate: new Date(),
        endDate: new Date().setMonth(11)
    });

    const handleValueChange = newValue => {
        console.log("newValue:", newValue);
        setValue(newValue);
    };

    return (
        <div>
            <Datepicker value={value} onChange={handleValueChange} />
        </div>
    );
};

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

Thanks to

onesine

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

JSPM

react-tlwind-datepicker