Multi-Calendar DatePicker Demo

Supporting Gregorian, Persian (Jalaali), and Hijri (Islamic) Calendar Systems

Gregorian Calendar (Western)

Features: Standard Western calendar, Week starts on Sunday, Leap year calculations (divisible by 4, except century years unless divisible by 400), Range: 1900-2100
Date Only:
$('#gregorian-date').multiCalendarDatePicker({
    calendar: 'gregorian',
    locale: 'en',
    format: 'YYYY/MM/DD'
});
Date & Time:
$('#gregorian-datetime').multiCalendarDatePicker({
    calendar: 'gregorian',
    locale: 'en',
    format: 'YYYY/MM/DD HH:mm',
    timePicker: true,
    timeFormat: 'HH:mm'
});

تقویم فارسی (جلالی)

ویژگی‌ها: تقویم خورشیدی ایرانی، هفته از شنبه شروع می‌شود، الگوریتم کبیسه دقیق با لیست تأیید شده (۱۲۰۰-۱۵۰۰)
تاریخ فقط:
$('#persian-date').multiCalendarDatePicker({
    calendar: 'persian',
    locale: 'fa',
    format: 'YYYY/MM/DD',
    rtl: true
});
تاریخ و زمان:
$('#persian-datetime').multiCalendarDatePicker({
    calendar: 'persian',
    locale: 'fa',
    format: 'YYYY/MM/DD HH:mm',
    timePicker: true,
    timeFormat: 'HH:mm',
    rtl: true
});

التقويم الهجري

المميزات: التقويم القمري الإسلامي، الأسبوع يبدأ يوم السبت، الگوريتم الكبيسة المحسن مع قائمة مؤكدة (١٣٠٠-١٦٠٠)
التاريخ فقط:
$('#hijri-date').multiCalendarDatePicker({
    calendar: 'hijri',
    locale: 'ar',
    format: 'YYYY/MM/DD',
    rtl: true
});
التاريخ والوقت:
$('#hijri-datetime').multiCalendarDatePicker({
    calendar: 'hijri',
    locale: 'ar',
    format: 'YYYY/MM/DD HH:mm',
    timePicker: true,
    timeFormat: 'HH:mm',
    rtl: true
});

Latest Updates & Improvements

Persian Calendar
  • ✅ Verified leap year algorithm (1200-1500)
  • ✅ Accurate leap year detection
  • ✅ Fixed leap year discrepancies
Hijri Calendar
  • ✅ Extended year range (1000-2000)
  • ✅ Improved leap year algorithm
  • ✅ Fixed date parsing for years > 1500
General Improvements
  • ✅ Enhanced data attributes support
  • ✅ Better RTL support
  • ✅ Improved time picker integration

Advanced Features Demo

Date Constraints:
$('#constrained-date').multiCalendarDatePicker({
    calendar: 'gregorian',
    locale: 'en',
    format: 'YYYY/MM/DD',
    minDate: '2024/01/01',
    maxDate: '2024/12/31',
    disabledDays: [0, 6] // Weekends
});
Dark Theme:
$('#dark-theme-date').multiCalendarDatePicker({
    calendar: 'gregorian',
    locale: 'en',
    format: 'YYYY/MM/DD',
    theme: 'dark'
});
With Seconds:
$('#seconds-time').multiCalendarDatePicker({
    calendar: 'gregorian',
    locale: 'en',
    format: 'YYYY/MM/DD HH:mm:ss',
    timePicker: true,
    timeFormat: 'HH:mm:ss',
    showSeconds: true
});

Data Attributes Demo

Hijri with Dark Theme:
<input type="text" 
       data-mcdp
       data-calendar="hijri"
       data-locale="ar"
       data-theme="dark"
       data-time-picker="true"
       data-time-format="hh:mm A"
       data-use24-hour="false">
Persian with Constraints:
<input type="text" 
       data-mcdp
       data-calendar="persian"
       data-locale="fa"
       data-min-date="1400/01/01"
       data-max-date="1410/12/29"
       data-disabled-days="5,6">

API Methods Demo

Test API methods on different calendar types. Each input uses a different calendar system.