https://github.com/omikkel/tailwind-datepicker-react
A tailwindcss/flowbite datepicker component built as a react component with types
https://github.com/omikkel/tailwind-datepicker-react
datepicker flowbite nextjs react tailwindcss
Last synced: 3 months ago
JSON representation
A tailwindcss/flowbite datepicker component built as a react component with types
- Host: GitHub
- URL: https://github.com/omikkel/tailwind-datepicker-react
- Owner: OMikkel
- License: mit
- Created: 2022-10-03T15:50:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-11T00:37:55.000Z (12 months ago)
- Last Synced: 2025-03-31T04:04:19.737Z (3 months ago)
- Topics: datepicker, flowbite, nextjs, react, tailwindcss
- Language: TypeScript
- Homepage: https://omikkel.github.io/tailwind-datepicker-react/
- Size: 1.57 MB
- Stars: 161
- Watchers: 4
- Forks: 74
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/tailwind-datepicker-react)
[](https://www.npmjs.com/package/tailwind-datepicker-react)
[](https://omikkel.github.io/tailwind-datepicker-react/)
# Tailwind-datepicker-react
A Tailwindcss/Flowbite datepicker component built as a React component with types based on the [original datepicker from Flowbite](https://flowbite.com/docs/plugins/datepicker/). This component can also be used as a plugin using the [Flowbite React](https://github.com/themesberg/flowbite-react) library.
Date logic from [VanillaJS-datepicker](https://github.com/mymth/vanillajs-datepicker).
## [Demo](https://omikkel.github.io/tailwind-datepicker-react/)
## 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
### Basic
```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 handleClose = (state: boolean) => {
setShow(state)
}
return (
)
}
```
### Advanced - Custom input field
```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 (
setShow(true)} readOnly />
)
}
```
### DatePicker Props
- children?: ReactElement
- value?: Date
- options?: [IOptions](###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](###ITheme) - Default: `As seen on demo page`
- icons?: [IIcons](###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](https://devhints.io/wip/intl-datetime) - 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](https://github.com/OMikkel/tailwind-datepicker-react/blob/master/LICENSE.md).
## Contributing
After clone, you can run (separated):
* `yarn run dev` to start building with [Nodemon](https://github.com/remy/nodemon).
* `cd demo-app/ && npm run dev` to start [Demo App](http://localhost:3000/).