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

!thumbnail

Installation

1. Install the package

``bash
npm install tailwind-datepicker-react
`

`bash
yarn add tailwind-datepicker-react
`

2. Add the styles to your tailwind.config.js file

`js
module.exports = {
...
content: [
...
"./node_modules/tailwind-datepicker-react/dist/*/.js", // <--- Add this line
],

};

`

3. Import the component and use it

`js
import Datepicker from "tailwind-datepicker-react"
`

Usage

$3

`jsx
const options = {
title: "Demo Title",
autoHide: true,
todayBtn: false,
clearBtn: true,
clearBtnText: "Clear",
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: () => Previous,
next: () => Next,
},
datepickerClassNames: "top-12",
defaultDate: new Date("2022-01-01"),
language: "en",
disabledDates: [],
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
inputNameProp: "date",
inputIdProp: "date",
inputPlaceholderProp: "Select Date",
inputDateFormatProp: {
day: "numeric",
month: "long",
year: "numeric"
}
}

const DemoComponent = () => {
const [show, setShow] = useState < boolean > false
const handleChange = (selectedDate: Date) => {
console.log(selectedDate)
}
const handleClear = () => {
console.log('Date is cleared!')
}
const handleClose = (state: boolean) => {
setShow(state)
}

return (


`jsx
const options = {
title: "Demo Title",
autoHide: true,
todayBtn: false,
clearBtn: true,
clearBtnText: "Clear",
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: () => Previous,
next: () => Next,
},
datepickerClassNames: "top-12",
defaultDate: new Date("2022-01-01"),
language: "en",
disabledDates: [],
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
inputNameProp: "date",
inputIdProp: "date",
inputPlaceholderProp: "Select Date",
inputDateFormatProp: {
day: "numeric",
month: "long",
year: "numeric"
}
}

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 (


- 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"}

$3

- background: string
- todayBtn: string
- clearBtn: string
- icons: string
- text: string
- disabledText: string
- input: string
- inputIcon: string
- selected: string

$3

- prev: () => ReactNode | JSX.Element
- next: () => ReactNode | JSX.Element

$3

This project is open-source under the MIT License.

Contributing

After clone, you can run (separated):

* yarn run dev to start building with Nodemon.
* cd demo-app/ && npm run dev` to start Demo App.