1.2.1 • Published 8 months ago

ethiopian-date-picker-and-converter v1.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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

ParameterTypeRequiredDefaultDescription
gregorianDatestringYes-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

PropTypeRequiredDescription
idstringYesUnique identifier for the input element
placeholderstringNoPlaceholder text for the input
onDateChange(date: string) => voidYesCallback 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.