@surafiel/ethiopian-date-picker
v1.0.0
Published
Complete Ethiopian calendar date picker component with Amharic support
Downloads
8
Maintainers
surafielReadme
Ethiopian Date Picker (የኢትዮጵያ ቀን መምረጫ)
A modern, lightweight, and accurate Ethiopian Date Picker component with full Amharic support. Built with ease of use and design in mind.
Features
- 📅 Full Ethiopian Calendar Support: Accurate conversion logic between Gregorian and Ethiopian calendars.
- 🇪🇹 Amharic Localization: Native support for Amharic month names and weekdays.
- 🎨 Beautiful UI: Modern, clean, and responsive design with smooth animations.
- 🛠 Zero Dependencies: Built with vanilla JavaScript and CSS (developed with Vite).
- 📦 Dual Build: Supports both ESM (
import) and UMD (<script>) usage. - 🌗 Dark Mode Ready: Styles are easily customizable.
Installation
You can install the package via npm (if published):
npm install @surafiel/ethiopian-date-pickerOr install directly from GitHub (Recommended if not on npm):
npm install github:surafielbeyene41/EthiopianDateConverterOr download the latest release from the GitHub repository.
Usage
1. Using ES Modules (React, Vue, etc.)
Import the styles and the component in your JavaScript/TypeScript file:
import { EthiopianDatePicker, EthiopianDateConverter } from 'ethiopian-date-picker';
import 'ethiopian-date-picker/dist/style.css'; // Don't forget the CSS!
// Initialize the picker
const picker = new EthiopianDatePicker('my-container-id', {
placeholder: 'ቀን ይምረጡ', // "Select Date"
onChange: (selectedDate) => {
console.log('Selected Date:', selectedDate);
// Output: { year: 2016, month: 1, day: 10 }
// Convert to Gregorian if needed
const greg = EthiopianDateConverter.toGregorian(
selectedDate.year,
selectedDate.month,
selectedDate.day
);
console.log('Gregorian:', greg);
}
});2. Using in Browser (Script Tag)
Include the script and CSS in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ethiopian Date Picker</title>
<link rel="stylesheet" href="./dist/style.css">
</head>
<body>
<div id="calendar-container"></div>
<script src="./dist/ethiopian-date-picker.umd.cjs"></script>
<script>
// The library exposes 'EthiopianDatePicker' globally
const picker = new EthiopianLib.EthiopianDatePicker('calendar-container', {
onChange: function(date) {
console.log(date);
}
});
</script>
</body>
</html>API Reference
EthiopianDatePicker
The main class for the UI component.
Constructor: new EthiopianDatePicker(containerId, options)
| Parameter | Type | Description |
|-----------|------|-------------|
| containerId | string | The ID of the HTML element to render the picker into. |
| options | Object | Configuration object (see below). |
Options:
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| placeholder | string | 'ማስገቢያ ቀን ይምረጡ' | Placeholder text for the input field. |
| onChange | function | () => {} | Callback function triggered when a date is selected. Receives { year, month, day }. |
EthiopianDateConverter
Utility class for date conversions.
Methods:
toEthiopian(gregorianDate)gregorianDate:Dateobject or date string.- Returns:
{ year, month, day }(Ethiopian)
toGregorian(ethiopianYear, ethiopianMonth, ethiopianDay)- Returns:
{ year, month, day }(Gregorian)
- Returns:
formatEthiopianDate(ethiopianDate, format)ethiopianDate:{ year, month, day }format:'full'(e.g., "10 መስከረም 2016") or'short'(e.g., "10/1/2016")
Development
Clone the repository:
git clone https://github.com/surafielbeyene41/EthiopianDateConverter.gitInstall dependencies:
npm installStart the development server:
npm run devBuild for production:
npm run build
License
This project is licensed under the MIT License.