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:

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Start Storybook:

   npm run storybook

4. 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.