
Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
@ballistix.digital/react-tailwindcss-datepicker
Advanced tools
A modern React Datepicker using Tailwind CSS 3
A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.
Go to full documentation
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the @tailwindcss/forms plugin) & Dayjs under the hood to work.
npm install react-tailwindcss-datepicker
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"
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;
Light Mode
Dark Mode
Supported themes
Teal themes example
You can find the demo at here
Info
👉 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
I thank you in advance for your contribution to this project.
MIT Licensed. Copyright (c) Lewhe Onesine 2022.
FAQs
A modern React Datepicker using Tailwind CSS 3
The npm package @ballistix.digital/react-tailwindcss-datepicker receives a total of 40 weekly downloads. As such, @ballistix.digital/react-tailwindcss-datepicker popularity was classified as not popular.
We found that @ballistix.digital/react-tailwindcss-datepicker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
Product
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.