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

1. Install the package

1npm install tailwind-datepicker-react

1yarn add tailwind-datepicker-react

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

1module.exports = {
2    ...
3    content: [
4        ...
5        "./node_modules/tailwind-datepicker-react/dist/**/*.js", // <--- Add this line
6    ],
7
8};
9

3. Import the component and use it

1import Datepicker from "tailwind-datepicker-react"

Usage

Basic

1const options = {
2	title: "Demo Title",
3	autoHide: true,
4	todayBtn: false,
5	clearBtn: true,
6	clearBtnText: "Clear",
7	maxDate: new Date("2030-01-01"),
8	minDate: new Date("1950-01-01"),
9	theme: {
10		background: "bg-gray-700 dark:bg-gray-800",
11		todayBtn: "",
12		clearBtn: "",
13		icons: "",
14		text: "",
15		disabledText: "bg-red-500",
16		input: "",
17		inputIcon: "",
18		selected: "",
19	},
20	icons: {
21		// () => ReactElement | JSX.Element
22		prev: () => <span>Previous</span>,
23		next: () => <span>Next</span>,
24	},
25	datepickerClassNames: "top-12",
26	defaultDate: new Date("2022-01-01"),
27	language: "en",
28	disabledDates: [],
29	weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
30	inputNameProp: "date",
31	inputIdProp: "date",
32	inputPlaceholderProp: "Select Date",
33	inputDateFormatProp: {
34		day: "numeric",
35		month: "long",
36		year: "numeric"
37	}
38}
39
40const DemoComponent = () => {
41	const [show, setShow] = useState < boolean > false
42	const handleChange = (selectedDate: Date) => {
43		console.log(selectedDate)
44	}
45	const handleClear = () => {
46		console.log('Date is cleared!')
47	}
48	const handleClose = (state: boolean) => {
49		setShow(state)
50	}
51
52	return (
53		<div>
54			<Datepicker options={options} onChange={handleChange} onClear={handleClear} show={show} setShow={handleClose} />
55		</div>
56	)
57}

Advanced - Custom input field

1const options = {
2	title: "Demo Title",
3	autoHide: true,
4	todayBtn: false,
5	clearBtn: true,
6	clearBtnText: "Clear",
7	maxDate: new Date("2030-01-01"),
8	minDate: new Date("1950-01-01"),
9	theme: {
10		background: "bg-gray-700 dark:bg-gray-800",
11		todayBtn: "",
12		clearBtn: "",
13		icons: "",
14		text: "",
15		disabledText: "bg-red-500",
16		input: "",
17		inputIcon: "",
18		selected: "",
19	},
20	icons: {
21		// () => ReactElement | JSX.Element
22		prev: () => <span>Previous</span>,
23		next: () => <span>Next</span>,
24	},
25	datepickerClassNames: "top-12",
26	defaultDate: new Date("2022-01-01"),
27	language: "en",
28	disabledDates: [],
29	weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
30	inputNameProp: "date",
31	inputIdProp: "date",
32	inputPlaceholderProp: "Select Date",
33	inputDateFormatProp: {
34		day: "numeric",
35		month: "long",
36		year: "numeric"
37	}
38}
39
40const DemoComponent = () => {
41	const [show, setShow] = useState < boolean > false
42	const [selectedDate, setSelectedDate] = (useState < Date) | (null > null)
43	const handleChange = (selectedDate: Date) => {
44		setSelectedDate(selectedDate)
45		console.log(selectedDate)
46	}
47	const handleClose = (state: boolean) => {
48		setShow(state)
49	}
50
51	return (
52		<div>
53			<Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose}>
54				<div className="...">
55					<div className="...">
56						<CalendarIcon />
57					</div>
58					<input type="text" className="..." placeholder="Select Date" value={selectedDate} onFocus={() => setShow(true)} readOnly />
59				</div>
60			</Datepicker>
61		</div>
62	)
63}

DatePicker Props

• children?: ReactElement
• value?: Date
• options?: IOptions
• onChange?: (date: Date) => void
• onClear?: () => 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):

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