Ethiopian Date Picker (ShadCN Styled)

A modern, lightweight, and customizable Ethiopian calendar date picker built with React, ShadCN/UI, Tailwind CSS, and kenat.

📅 Supports Ethiopian & Gregorian calendar views
🎨 Beautifully styled using ShadCN components
⚡️ Fast and fully typed with TypeScript
📦 Easy to integrate in any React/Next.js app

---

✨ Features

• Ethiopian and Gregorian calendar dual display
• Styled with Tailwind + ShadCN
• Easily navigable by month
• Lightweight, dependency-aware
• Simple integration into any React or Nextjs project

---

📦 Installation

npm install ethiopian-datepicker-shadcn

or

yarn add ethiopian-datepicker-shadcn

---

🚀 Usage

import React, { useState } from 'react';
import { EthiopianDatePicker } from 'ethiopian-datepicker-shadcn';

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="p-4">
      <EthiopianDatePicker
        value={selectedDate || undefined}
        onChange={(date) => {
          setSelectedDate(date);
          console.log('Selected Ethiopian Date:', date);
        }}
        useGeez={false}
      />
    </div>
  );
}

☝️ Ensure your app is already configured to use Tailwind CSS and ShadCN components.

---

🧱 Props

Prop	Type	Description
value	object	Current selected date (Ethiopian or null)
onChange	function	Callback when a date is selected
useGeez	boolean	makes the number format in Ge'ez (Amharic)
includeGregorian	boolean	includes gregorian format

---

🖼 Screenshot

---

🔧 Tailwind Setup (if not yet installed)

Make sure your project is Tailwind-enabled. If not:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add to your tailwind.config.js:

content: ["./src/**/*.{js,ts,jsx,tsx}"]

Add to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

🙏 Credits

• Calendar logic powered by kenat
• UI components by ShadCN UI
• Icons by Lucide

---

📄 License

MIT License © 2025 Henaorth16