DISCLAIMER

This is a fork of the original react-tailwindcss-datepicker

In the original, some code contained optional chaining, and in the particular project where this datepicker was needed:

• React 16 had to be used
• optional chaining wasn't being transpiled, so CRA was throwing an error
• migrating from CRA to vite isn't an option
• updating Babel or Node.js isn't an option

So (modifications from react-tailwindcss-datepicker 1.6.6 into this package):

• The code was replaced from optional chaining to the traditional if() check or a ternary.
• The babel.config.json file that had beed added to the .npmignore list and was missing has here been removed from .npmignore and added to the the root directory of this project.

Info for THE ORIGINAL React Tailwindcss Datepicker

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

Contents

• DISCLAIMER
• Info for THE ORIGINAL React Tailwindcss Datepicker
  • Contents
  • Features
  • Documentation
  • Installation of React Tailwindcss Datepicker React 16
    • Install via npm
    • Install via yarn
  • Simple Usage
    • Tailwindcss Configuration
  • Theming options
  • PlayGround FOR THE ORIGINAL
  • Contributing TO THE ORIGINAL
  • Official Documentation repo FOR THE ORIGINAL
  • Thanks to
  • License

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 of React Tailwindcss Datepicker React 16

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

Install via npm

$ npm install react-tailwindcss-datepicker-react16

Install via yarn

$ yarn add react-tailwindcss-datepicker-react16

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

"dayjs": "^1.11.6",
"react": "^16.13.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-react16/dist/index.esm.js"
    ]
    // ...
};

Then use react-tailwindcss-select in your app:

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

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

Dark Mode

Supported themes

Teal themes example

You can find the demo at here

Info ON THE ORIGINAL

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

PlayGround FOR THE ORIGINAL

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 TO THE ORIGINAL

See CONTRIBUTING.md

Official Documentation repo FOR THE ORIGINAL

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

Thanks to

• React Tailwindcss Datepicker
• Vue Tailwind Datepicker
• React
• Tailwind CSS
• dayjs

License

MIT Licensed. Copyright (c) Lewhe Onesine 2022.