ethiopian-date-picker-and-converter/README.md

A React component library for converting and picking Ethiopian dates.

# Ethiopian Date Picker and Converter

The Ethiopian Date Picker and Converter is a React component library designed to assist anyone who needs to work with Ethiopian dates. Whether you're converting a date from the Gregorian calendar to the Ethiopian calendar or simply adding a date picker UI to your input fields, this library simplifies your development process.

## Features

- Convert Gregorian dates to Ethiopian dates.
- User-friendly date picker UI for selecting Ethiopian dates.
- Easy integration into your project.
- TypeScript support
- Modern styling with customizable themes
- Handles leap years correctly
- Proper date validation

## Installation

You can install the package using npm:

```bash
npm install ethiopian-date-picker-and-converter
```

Or using yarn:

```bash
yarn add ethiopian-date-picker-and-converter
```

## Usage

### Date Picker Component

```typescript
import React, { useState } from 'react';
import { EthiopianDatePicker } from 'ethiopian-date-picker-and-converter';
import 'ethiopian-date-picker-and-converter/dist/cjs/style.css';

const App = () => {
  const handleDateChange = (date: string) => {
    console.log("Selected Ethiopian date:", date);
  };

  return (
    <div>
      <h1>Ethiopian Date Picker Example</h1>
      <EthiopianDatePicker 
        id="date-picker" 
        placeholder="የቀን መምረጫ / Select Date" 
        onDateChange={handleDateChange} 
      />
    </div>
  );
};

export default App;
```

### Date Conversion Utility

The library includes a dedicated utility file for date conversions. This utility provides functionality for converting Gregorian dates to Ethiopian dates with different return formats.

```typescript
import { EthiopianDateConverter } from "ethiopian-date-picker-and-converter";

// Convert with default 'full' format
const fullDate = EthiopianDateConverter('2024-01-15');  // Returns: 'ሰኞ፣ ጥር 7 ቀን 2016 ዓ.ም.'

// Convert with 'date-only' format
const dateOnly = EthiopianDateConverter('2024-01-15', 'date-only');  // Returns: '2016-5-7'

// Convert with 'object' format
const dateObject = EthiopianDateConverter('2024-01-15', 'object');  
// Returns: {
//   year: 2016,
//   month: 5,
//   day: 7,
//   monthName: 'ጥር',
//   weekDay: 'ሰኞ'
// }
```

### Date Conversion Utility Props

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| gregorianDate | string | Yes | - | Gregorian date in 'YYYY-MM-DD' format |
| returnFormat | 'full' \| 'date-only' \| 'object' | No | 'full' | Format of the returned Ethiopian date |

#### Return Types
- **'full'**: Returns a string with complete date in Amharic (e.g., 'ሰኞ፣ ጥር 7 ቀን 2016 ዓ.ም.')
- **'date-only'**: Returns a string in 'YYYY-M-D' format
- **'object'**: Returns an object with year, month, day, monthName, and weekDay properties

## Props

### EthiopianDatePicker Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| id | string | Yes | Unique identifier for the input element |
| placeholder | string | No | Placeholder text for the input |
| onDateChange | (date: string) => void | Yes | Callback function when date is selected |

## Development

To run the project locally:

1. Clone the repository:
   ```bash
   git clone https://github.com/KingAbe1/et-calander-picker-and-converter.git
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Start Storybook:
   ```bash
   npm run storybook
   ```

4. Build the library:
   ```bash
   npm run build
   ```

## Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.

## License

This project is licensed under the MIT License. See the LICENSE file for details.