DatePicker Guide - Modern Calendar System

🚀 Key Features

🌍

Multi-Calendar Support

Ethiopian, Gregorian, and Islamic calendars

🗣️

Multi-Language

English, Amharic, and Afaan Oromo

🎨

Beautiful Themes

6 modern themes with animations

📱

Responsive Design

Works on all devices

⚡

Easy Integration

Simple API and auto-initialization

🔧

Form Ready

Perfect for forms and validation

📝 Basic Usage

1. Include Required Files

<link rel="stylesheet" href="css/modern-calendar.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/modern-calendar.js"></script>
<script src="js/datepicker.js"></script>
            

2. Create Input Fields

Gregorian DatePicker

Select Date:

new ModernDatePicker('#basic-gregorian', {
    calendar: 'gregorian',
    language: 'en',
    theme: 'modern'
});
                    

Ethiopian DatePicker

ቀን ይምረጡ:

new ModernDatePicker('#basic-ethiopian', {
    calendar: 'ethiopian',
    language: 'am',
    theme: 'green'
});
                    

🎯 Advanced Examples

Event Handling

Date with Events:

Select a date to see event details...

new ModernDatePicker('#event-picker', {
    calendar: 'ethiopian',
    language: 'am',
    onSelect: function(date, formatted) {
        console.log('Selected:', date, formatted);
    }
});
                    

Custom Format

Custom Format (dd/mm/yyyy):

new ModernDatePicker('#format-picker', {
    calendar: 'gregorian',
    format: 'dd/mm/yyyy',
    theme: 'purple'
});
                    

Islamic Calendar

Islamic Date:

new ModernDatePicker('#islamic-picker', {
    calendar: 'islamic',
    language: 'en',
    theme: 'orange'
});
                    

Auto-Initialize

Auto DatePicker:

<input data-datepicker='{
    "calendar":"ethiopian",
    "language":"oro",
    "theme":"ocean"
}' placeholder="Auto picker...">
                    

🔧 Configuration Options

new ModernDatePicker('#my-input', {
    calendar: 'ethiopian',        // 'gregorian', 'ethiopian', 'islamic'
    language: 'am',               // 'en', 'am', 'oro'
    theme: 'modern',              // 'modern', 'dark', 'green', 'purple', 'orange', 'ocean'
    format: 'yyyy-mm-dd',         // Date format
    placeholder: 'Select date...', // Input placeholder
    closeOnSelect: true,          // Close popup on date selection
    showIcon: true,               // Show calendar icon
    position: 'bottom',           // Popup position
    onSelect: function(date, formatted) {
        // Callback when date is selected
        console.log('Date selected:', date, formatted);
    }
});
            

📋 Form Integration

Complete Form Example

Form submission results will appear here...

🌟 Ethiopian Calendar Features

Accurate Conversion

Proper Julian Day conversion algorithm ensures accurate date conversion between Gregorian and Ethiopian calendars.

13 Months Support

Full support for all 13 Ethiopian months including Pagume with proper leap year calculation.

Multi-Language Display

Ethiopian dates display correctly in Amharic and Afaan Oromo with proper month and day names.

Form Integration

Ethiopian dates are properly formatted for form submission and validation.

Test Ethiopian Date Conversion

Test Date (June 12, 2017):

Click the input to see June 12, 2017 converted to Ethiopian calendar...

📅 DatePicker Guide