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.
A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.
- ✅ 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
Go to full documentation
$ npm install react-tailwindcss-datepicker-react16
$ 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"
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;
Light Mode
Dark Mode
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.
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
See CONTRIBUTING.md
https://github.com/onesine/react-tailwindcss-datepicker-doc
MIT Licensed. Copyright (c) Lewhe Onesine 2022.