🗕️ react-jewish-datepicker

A fully customizable React Datepicker for the Hebrew calendar, styled with TailwindCSS and powered by jewish-dates-core.

✨ Features

• 🗖️ Supports full Jewish (Hebrew) calendar, including leap years and Adar I/II
• 🎨 Built-in TailwindCSS styling with full className overrides
• 📦 Lightweight and tree-shakable
• 💬 Hebrew labels and right-to-left layout
• ✅ Built-in accessibility & keyboard support (coming soon)

📆 Installation

npm install react-jewish-datepicker jewish-dates-core

Note: TailwindCSS is a peer dependency. You must have it configured in your project.

🧐 Usage

import { ReactJewishDatePicker } from "react-jewish-datepicker"

export default function App() {
	const [date, setDate] = useState("")

	return (
		<div className="p-6">
			<ReactJewishDatePicker
				id="hebrew-date"
				value={date}
				onChange={(newDate) => setDate(newDate)}
			/>
		</div>
	)
}

⚙️ Props

<ReactJewishDatePicker />

| Prop | Type | Required | Description | | ------------ | ------------------------ | -------- | ------------------------------------------------------ | | id | string | ✅ | Unique ID for the input field | | value | string | ❌ | Initial selected Jewish date (Hebrew string) | | onChange | (date: string) => void | ❌ | Callback triggered when user selects a date | | classNames | DatePickerClassNames | ❌ | Customize Tailwind classes for all parts of the widget |

🎨 Tailwind Customization

You can override the default styles using the classNames prop:

<ReactJewishDatePicker
	id="date"
	classNames={{
		wrapper: "text-right",
		input: "border-blue-500",
		calendarWrapper: "bg-white shadow-xl",
		calendar: "rounded-lg",
		dayCellSelected: "bg-emerald-600 text-white font-bold",
	}}
/>

classNames Structure

interface DatePickerClassNames {
	wrapper?: string
	input?: string
	calendarWrapper?: string
	calendar?: string
	dayCell?: string
	dayCellSelected?: string
	dayCellOutsideMonth?: string
	header?: string
	navButton?: string
	select?: string
	weekdayHeader?: string
}

📚 Output Format

The onChange callback returns a Hebrew date string, e.g.:

"בֶּ תֶשְׁרִי תשפ"

You can also access the Gregorian date via data-greg-date attribute on the input field if needed.

🧱 Built With

• jewish-dates-core
• React + TypeScript
• TailwindCSS
• PostCSS

🧪 Development & Build

# Watch for changes
npm run watch

# Build for production
npm run build

📤 Publish (for maintainers)

npm run release
git push --follow-tags
npm publish --access public

📜 License

MIT © Yossi David