Tailwind-datepicker-react
A Tailwindcss/Flowbite datepicker component built as a React component with types based on the original datepicker from Flowbite. This component can also be used as a plugin using the Flowbite React library.
Date logic from VanillaJS-datepicker.
Demo
Installation
- Install the package
npm install tailwind-datepicker-reactyarn add tailwind-datepicker-react- Add the styles to your
tailwind.config.jsfile
module.exports = {
...
content: [
...
"./node_modules/tailwind-datepicker-react/dist/**/*.js", // <--- Add this line
],
};- Import the component and use it
import Datepicker from "tailwind-datepicker-react"Usage
Basic
const options = {
title: "Demo Title",
autoHide: true,
todayBtn: false,
clearBtn: true,
maxDate: new Date("2030-01-01"),
minDate: new Date("1950-01-01"),
theme: {
background: "bg-gray-700 dark:bg-gray-800",
todayBtn: "",
clearBtn: "",
icons: "",
text: "",
disabledText: "bg-red-500",
input: "",
inputIcon: "",
selected: "",
},
icons: {
// () => ReactElement | JSX.Element
prev: () => <span>Previous</span>,
next: () => <span>Next</span>,
},
datepickerClassNames: "top-12",
defaultDate: new Date("2022-01-01"),
language: "en",
}
const DemoComponent = () => {
const [show, setShow] = useState < boolean > false
const handleChange = (selectedDate: Date) => {
console.log(selectedDate)
}
const handleClose = (state: boolean) => {
setShow(state)
}
return (
<div>
<Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose} />
</div>
)
}Advanced - Custom input field
const options = {
title: "Demo Title",
autoHide: true,
todayBtn: false,
clearBtn: true,
maxDate: new Date("2030-01-01"),
minDate: new Date("1950-01-01"),
theme: {
background: "bg-gray-700 dark:bg-gray-800",
todayBtn: "",
clearBtn: "",
icons: "",
text: "",
disabledText: "bg-red-500",
input: "",
inputIcon: "",
selected: "",
},
icons: {
// () => ReactElement | JSX.Element
prev: () => <span>Previous</span>,
next: () => <span>Next</span>,
},
datepickerClassNames: "top-12",
defaultDate: new Date("2022-01-01"),
language: "en",
}
const DemoComponent = () => {
const [show, setShow] = useState < boolean > false
const [selectedDate, setSelectedDate] = (useState < Date) | (null > null)
const handleChange = (selectedDate: Date) => {
setSelectedDate(selectedDate)
console.log(selectedDate)
}
const handleClose = (state: boolean) => {
setShow(state)
}
return (
<div>
<Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose}>
<div className="...">
<div className="...">
<CalendarIcon />
</div>
<input type="text" className="..." placeholder="Select Date" value={selectedDate} onFocus={() => setShow(true)} readOnly />
</div>
</Datepicker>
</div>
)
}DatePicker Props
- children?: ReactElement
- options?: IOptions
- onChange?: (date: Date) => void
- show: boolean
- setShow: (show: boolean) => void
- classNames?: string
IOptions
- title?: string - Default:
disabled - autoHide?: boolean - Default:
true - todayBtn?: boolean - Default:
true - todayBtnText?: string - Default:
Today - clearBtn?: boolean - Default:
true - clearBtnText?: string - Default:
Clear - maxDate?: Date - Default:
disabled - minDate?: Date - Default:
disabled - theme?: ITheme - Default:
As seen on demo page - icons?: IIcons - Default:
As seen on demo page - datepickerClassNames?: string - Default:
"" - defaultDate?: false|Date - Default:
new Date() - language?: string - Default:
en - disabledDates?: Date[] - Default:
[] - weekDays?: string[] - Default:
["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] - Start at Monday even with another language - inputNameProp?: string - Default:
date - inputIdProp?: string - Default:
Same as "inputNameProp" - inputPlaceholderProp?: string - Default:
Select Date - inputDateFormatProp?: Intl.DateTimeFormatOptions - Default:
{day: "numeric", month: "long", year: "numeric"}
ITheme
- background: string
- todayBtn: string
- clearBtn: string
- icons: string
- text: string
- disabledText: string
- input: string
- inputIcon: string
- selected: string
IIcons
- prev: () => ReactNode | JSX.Element
- next: () => ReactNode | JSX.Element
License
This project is open-source under the MIT License.
Contributing
After clone, you can run (separated):