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:

npm install ethiopian-date-picker-and-converter

Or using yarn:

yarn add ethiopian-date-picker-and-converter

Usage

Date Picker Component

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.

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:

Clone the repository:

git clone https://github.com/KingAbe1/et-calander-picker-and-converter.git

Install dependencies:
```
npm install
```
Start Storybook:
```
npm run storybook
```
Build the library:
```
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.

Package detail