v1.1.6

Ethiopian Date Picker

A full-featured, high-performance date picker for the Ethiopian calendar system.

Designed for professional web applications, this library offers precise conversion between Ethiopian (Ge'ez) and Gregorian calendars with zero external dependencies. It focuses on accessibility, internationalization, and premium developer experience.

🎯

Accurate Conversion

Military-grade accuracy in calendar mapping, handling leap years and the 7-8 year difference seamlessly.

🌐

Bilingual First

Native support for Amharic and English, allowing for localized experiences in diverse markets.

⌨️

Full Accessibility

WAI-ARIA compliant with exhaustive keyboard support for power users and assistive technologies.

Live Playground

Experience the picker first-hand. This live demo uses the local library build.

Select a date above to see the data structure here.

Time Picker (New)

A standalone time picker which matches the library aesthetic.

Select a time above.

Installation

Choose the installation method that fits your workflow. We support both JavaScript and PHP environments.

JavaScript (NPM)

Terminal
npm i @bekim_2121/ethiopian-datepicker

PHP (Composer)

Terminal
composer require bekim2121/ethiopian-datepicker

JavaScript (CDN)

Import styles and scripts directly in your HTML. Ideal for quick prototyping or static sites.

HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bekim_2121/ethiopian-datepicker@1.1.6/dist/ethiopian-datepicker.css">
<script src="https://cdn.jsdelivr.net/npm/@bekim_2121/ethiopian-datepicker@1.1.6/dist/ethiopian-datepicker.js"></script>

Quick Start

Initialize your first Ethiopian date picker in seconds.

JavaScript Quick Start

Javascript
// 1. Identify your input element
const input = document.querySelector('#my-date-input');

// 2. Initialize the picker
const picker = new EthiopianDatePicker(input, {
  locale: 'am',           // Amharic locale
  highlightHolidays: true // Highlighting celebrations
});

// 3. Listen for changes
picker.options.onChange = (date) => {
  console.log('User selected:', date.formatted);
};

PHP Quick Start

PHP
<?php
require 'vendor/autoload.php';
use EthiopianDatePicker\EthiopianDatePicker;

// Get current Ethiopian date
$today = EthiopianDatePicker::today();
echo "Today: " . EthiopianDatePicker::formatDate($today, 'amharic', 'long');

// Convert Gregorian to Ethiopian
$ethiopianDate = EthiopianDatePicker::gregorianToEthiopian(2023, 9, 11);
echo "Ethiopian date: " . EthiopianDatePicker::formatDate($ethiopianDate, 'english', 'long');

Time Picker Quick Start

Javascript
// Initialize the time picker
const timePicker = new EthiopianTimePicker('#my-time-input', {
  useEthiopianTime: true, // Native 6-hour offset (Sunrise = 12:00)
  darkMode: false,
  onChange: (time) => {
    console.log('Ethiopian:', time.ethiopian.formatted);
    console.log('Gregorian Hours:', time.gregorian.hours);
  }
});

Configuration

Fine-tune every aspect of the picker's behavior and appearance.

Option Default Detail
locale 'am' Supports 'am' (Amharic) and 'en' (English).
darkMode false Enables refined dark theme.
minDate null Prevents selection of dates before this (Gregorian Date).
maxDate null Prevents selection of dates after this (Gregorian Date).
showToday true Shows shortcut to jump to "Today".

TimePicker Options

Option Default Detail
useEthiopianTime true Uses traditional 6-hour offset (6 AM = 12:00).
twelveHour true Enables 12-hour cycle with Day/Night labels.
darkMode false Enables dark theme for the picker.
locale 'am' Label language (Amharic/English).

DatePicker API

getSelectedDate()

Returns the currently selected date as a structured object.

{
  year: 2017,
  month: 1,
  day: 1,
  formatted: "መስከረም 1, 2017",
  gregorian: Date // Standard JS Date
}

setDate(y, m, d)

Sets the picker to a specific Ethiopian date programmatically.

open() / close()

Manually trigger the picker visibility.

TimePicker API

confirm()

Programmatically accept the current selection and close.

setHour(h) / setMinute(m)

Sets the internal time state (1-12 for hours, 0-59 for minutes).

onChange Callback Data

{
  ethiopian: { hours: 4, minutes: 20, period: "ቀን" },
  gregorian: { hours: 10, minutes: 20 },
  formatted: "04:20 ቀን"
}

Age Calculation

Easily calculate age based on an Ethiopian birthdate. This utility handles the 7-8 year difference and calculates precise years, months, and days.

Select your birth date to calculate your age.

Javascript
const calendar = new EthiopianCalendar();
const birthDate = { year: 1990, month: 1, day: 1 };
const age = calendar.calculateAge(birthDate.year, birthDate.month, birthDate.day);

console.log(`Age: ${age.years} years, ${age.months} months, and ${age.days} days`);

React Integration

Use the library within a React functional component effortlessly with useRef and useEffect.

React / JSX
import { useEffect, useRef } from 'react';

const EthDatePicker = ({ onDateSelect }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const inst = new EthiopianDatePicker(inputRef.current, {
      onChange: (date) => onDateSelect(date)
    });
    return () => inst.destroy();
  }, [onDateSelect]);

  return <input ref={inputRef} readOnly />;
};

Troubleshooting

Common questions and solutions for integration.

Picker doesn't position correctly?

Ensure the parent container of your input does not have overflow: hidden and the library CSS is loaded before the script.

Dates are off by a few years?

Remember that the Ethiopian calendar is 7-8 years behind the Gregorian calendar. This is expected behavior.

© Ethiopian Date Picker Library. Released under MIT License.