# MUI Ethiopian DatePicker
Current Version: 0.0.1
`ethiopian-datepicker` is a React component for selecting Ethiopian dates. It's built on top of Material-UI and provides a culturally tailored date picker experience integrated seamlessly with other MUI components.
## Installation
You can install the package using npm:
```console
npm install ethiopian-datepicker
```
### Peer Dependencies
```code
"peerDependencies": {
"@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 using:
```console
npm install @mui/icons-material @mui/material @mui/x-date-pickers date-fns react react-dom
```
## Usage
### Basic Usage with `EtDatePicker`
```tsx
import React, { useState } from "react";
import EtDatePicker from "ethiopian-datepicker";
function MyComponent() {
const [date, setDate] = useState(null);
return (
{
setDate(selectedDate);
}}
value={date}
minDate={new Date("2023-08-20")}
maxDate={new Date("2023-08-26")}
// other TextField props here, except InputProps
/>
);
}
```
## Localization Support in `Version 0.1.1`
Starting from version 0.1.7, `ethiopian-datepicker` introduces localization support for different Ethiopian localizations. This feature allows a more tailored experience for users.
#### 1. First, you need to import the EtLocalizationProvider from the ethiopian-datepicker package.
```tsx
import { EtLocalizationProvider } from 'ethiopian-datepicker';
```
#### 2. Wrap Your Application or Component:
Use the EtLocalizationProvider to wrap your entire application or just the section where the date picker is used. This will ensure that all date pickers within this context are localized.
```tsx
function MyApp({ children }) {
return (
{children}
);
}
```
#### 3. Configure the Localization Provider:
The EtLocalizationProvider accepts the following props to …