Bahirumulugeta/habesha-date-picker

It including ethiopian calender # 🇪🇹 Habesha DatePicker **Version: 0.2.3** A beautiful and culturally-aware Ethiopian calendar component built for modern React applications. Powered by **Material-UI**, `habesha-datepicker` simplifies date selection, supporting the Ethiopian calendar, Afan Oromo labels, and the Gregorian calendar. ## 🚀 Installation To get started, install the package via npm: ```bash npm install habesha-datepicker ``` **Required Peer Dependencies:** This package relies on the following peer dependencies. Please ensure they are also installed in your project: ``` "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.6", "@mui/material": "^5.14.6", "@mui/x-date-pickers": "^6.11.2", "date-fns": "^2.30.0", "react": "^18.2.0", "react-dom": "^18.2.0" ``` You can install them all at once using this command: ```bash npm install @mui/icons-material @mui/material @mui/x-date-pickers date-fns react react-dom ``` ## 🧠 Usage ### Single Date Picker Use it for selecting a single date, just like any standard date picker. ```tsx import React, { useState } from "react"; import EtDatePicker from "habesha-datepicker"; function MyComponent() { const [selectedDate, setSelectedDate] = useState (null); return ( setSelectedDate(date as Date | null)} minDate={new Date("YYYY-MM-DD")} maxDate={new Date("YYYY-MM-DD")} /> ); } ``` --- ### Range Picker (Start → End) Need to select a date range? It's straightforward. ```tsx import React, { useState } from "react"; import EtDatePicker from "habesha-datepicker"; function MyRangeComponent() { const [dateRange, setDateRange] = useState ([null, null]); return ( setDateRange(range as [Date | null, Date | null])} /> ); } ``` --- ## 🌍 Localization Since version 0.1.7, the date picker offers robust localization options: * **GC** – Gregorian Calendar * **EC** – Ethiopian Calendar (Amharic) * **AO** – Afan Oromo * **CUSTOM** – Define your own calendar labels ### Step 1: Wrap your application with the pr …