Skip to content

OMikkel/tailwind-datepicker-react

Repository files navigation

NPM Version NPM Minified Size GitHub deployments

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.

thumbnail

Installation

  1. Install the package
npm install tailwind-datepicker-react
yarn add tailwind-datepicker-react
  1. Add the styles to your tailwind.config.js file
module.exports = {
    ...
    content: [
        ...
        "./node_modules/tailwind-datepicker-react/dist/**/*.js", // <--- Add this line
    ],

};
  1. 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,
	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: () => <span>Previous</span>,
		next: () => <span>Next</span>,
	},
	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 (
		<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,
	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: () => <span>Previous</span>,
		next: () => <span>Next</span>,
	},
	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 (
		<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
  • value?: Date
  • 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):

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