Installation
Warning
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the @tailwindcss/forms plugin) & Dayjs under the hood to work.
Install via npm
$ npm install react-advance-datepicker
Install via yarn
$ yarn add react-advance-datepicker
Make sure you have installed the peer dependencies as well with the below versions.
"dayjs": "^1.11.6"
"react": "^18.2.0"
Simple Usage
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-advance-datepicker/dist/index.esm.js",// ...
}
import React, {useState} from "react";
import Datepicker from "react-advance-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 (<Datepicker
value={value}
onChange={handleValueChange}
/>
);};
export default App;