Bahirumulugeta/habesha-date-picker
Domaine:
natural language processingType de record:
software
Créateur:
Bah
Hôte:
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 …