react-tailwindcss-datepicker-react16
v1.6.6
Published
A modern React Datepicker using Tailwind CSS 3
Downloads
3
Maintainers
Readme
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
Contents
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
License
MIT Licensed. Copyright (c) Lewhe Onesine 2022.