كلندر هجري/ميلادي - Calendar Web

يمكنك استخدام jQuery plugin التالية :
jQuery Calender Plugin

طريقة استخدام ال jQuery Plugin السابق:
1- قم بتضمين مكتبة ال jQuery في قسم ال head من صفحة الويب خاصتك على الشكل التالي

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2- قم بتحميل وتضمين مكتبة الجافاسكريبت الخاصة بال Calenders في قسم ال head من صفحتك

<script type="text/javascript" src="js/jquery.calendars.js"></script> 
<script type="text/javascript" src="js/jquery.calendars.plus.js"></script>

3- قم بتحميل وتضمين  jQuery Calendars Datepicker الخاصة بال CSS و ال JS في قسم ال head من صفحتك

<link rel="stylesheet" type="text/css" href="css/jquery.calendars.picker.css"> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.calendars.picker.js"></script>

4- قم بربط وظيفة التقويم (calender) بحقل إدخال أو div أو span

$(selector).calendarsPicker();

- كما يمكنك إضافة إعدادت مخصصة كجزء من العملية على الشكل التالي

$(selector).calendarsPicker({calendar: $.calendars.instance('persian')});

- لمزيد من التفاصيل ، قم بزيارة الصفحة documentation reference

من المهم التمييز بين التقويم الفارسي (الهجري الشمسي) والتقويم الهجري القمري: المثال في الإجابة السابقة يستخدم $.calendars.instance('persian')، وهو التقويم الفارسي، لا الهجري القمري مثل تقويم أم القرى المعتمد في السعودية. وقد تستخدم بعض المكتبات تقويماً إسلامياً حسابياً بدلاً من أم القرى، وقد يختلف التاريخ بينهما بيوم واحد في بعض الحالات.

ويمكنك اليوم تنفيذ ذلك دون مكتبة في المتصفحات الحديثة التي تدعم تقويم أم القرى عبر Intl. هذه دالة تبني شهراً ميلادياً، وتحت كل يوم تاريخه الهجري، كما في التقاويم التي تعرض التاريخين معاً:

// Month grid with the Gregorian day and its Hijri (Umm al-Qura) date, using Intl only (no library).
const hijriParts = new Intl.DateTimeFormat('en-u-ca-islamic-umalqura', {
  timeZone: 'UTC', day: 'numeric', month: 'numeric', year: 'numeric',
});
const hijriMonthName = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura-nu-latn', {
  timeZone: 'UTC', month: 'long',
});

// Browsers without Umm al-Qura silently fall back to the Gregorian calendar, so check before use.
const UMALQURA_SUPPORTED = hijriParts.resolvedOptions().calendar === 'islamic-umalqura';

function toHijri(date) {
  const p = Object.fromEntries(hijriParts.formatToParts(date).map((x) => [x.type, x.value]));
  return { day: Number(p.day), month: Number(p.month), year: parseInt(p.year) };
}

// Weeks of one Gregorian month (month: 1–12), starting on Saturday. Empty cells are null.
function monthGrid(year, month) {
  const first = new Date(Date.UTC(year, month - 1, 1));
  const days = new Date(Date.UTC(year, month, 0)).getUTCDate();
  const offset = (first.getUTCDay() + 1) % 7; // Saturday = 0
  const cells = Array(offset).fill(null);
  for (let d = 1; d <= days; d++) {
    const date = new Date(Date.UTC(year, month - 1, d));
    const h = toHijri(date);
    cells.push({ iso: date.toISOString().slice(0, 10), day: d, hijri: h, hijriMonth: hijriMonthName.format(date) });
  }
  while (cells.length % 7) cells.push(null);
  const weeks = [];
  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
  return weeks;
}

// Draw the month in `container`; clicking a day calls onPick with { iso, day, hijri, hijriMonth }.
function renderCalendar(container, year, month, onPick) {
  const head = ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'];
  const table = document.createElement('table');
  table.dir = 'rtl';
  table.className = 'dual-cal';
  table.createTHead().insertRow().append(...head.map((h) => Object.assign(document.createElement('th'), { textContent: h })));
  const body = table.createTBody();
  for (const week of monthGrid(year, month)) {
    const row = body.insertRow();
    for (const cell of week) {
      const td = row.insertCell();
      if (!cell) continue;
      const day = document.createElement('b');
      day.textContent = cell.day;
      const hijri = document.createElement('small');
      hijri.textContent = `${cell.hijri.day} ${cell.hijriMonth}`;
      td.append(day, document.createElement('br'), hijri);
      td.dataset.date = cell.iso;
      td.onclick = () => onPick(cell);
    }
  }
  container.replaceChildren(table);
}

ولربطها بنموذج PHP:

<div id="cal"></div>
<p id="picked"></p>
<input type="hidden" name="date" id="date">

<script>
  if (!UMALQURA_SUPPORTED) {
    // لا نعرض تواريخ هجرية خاطئة: اعرض حقل تاريخ ميلادي عادياً، أو استخدم مكتبة تحمل جدول أم القرى
    document.getElementById('date').type = 'date'; // الحقل نفسه يصبح منتقي تاريخ ميلادياً ظاهراً
  } else {
    renderCalendar(document.getElementById('cal'), 2026, 10, (c) => {
      document.getElementById('date').value = c.iso; // يصل إلى PHP بصيغة 2026-10-15
      document.getElementById('picked').textContent = `${c.iso} — ${c.hijri.day} ${c.hijriMonth} ${c.hijri.year} هـ`;
    });
  }
</script>

جرّبتها في المتصفح: أكتوبر 2026 يظهر في ستة أسابيع، يبدأ يوم الخميس، وعند الضغط على يوم 15 يصبح الحقل 2026-10-15 ويظهر «4 جمادى الأولى 1448 هـ».

ملاحظات:

• خزّن في قاعدة البيانات التاريخ الميلادي (حقل DATE) كما يصلك من النموذج، واعرض الهجري عند الحاجة. هذا أبسط من تخزين التاريخين وأسلم من الأخطاء.
• إن احتجت التاريخ الهجري داخل PHP نفسه، فامتداد intl يتيح اختيار التقويم في IntlDateFormatter (مثل islamic-umalqura)، لكني لم أختبر ذلك هنا: تأكد من تفعيل الامتداد ومن دعم إصدار ICU في خادمك لهذا التقويم، وقارن الناتج بتاريخ معروف.
• تحقق من الدعم: إذا لم يكن التقويم مدعوماً في بيئة ما، فقد يعود Intl بصمت إلى تقويم آخر، مثل الميلادي، دون إظهار خطأ. لذلك يفحص الكود resolvedOptions().calendar في UMALQURA_SUPPORTED. واختبر في المتصفحات التي يستخدمها زوارك، مثلاً toHijri(new Date(Date.UTC(2026, 9, 15))) يجب أن يعطي { day: 4, month: 5, year: 1448 }.
• في تنفيذ ICU الموثّق لهذا التقويم تمتد بيانات أم القرى من 1300 إلى 1600 هـ، وخارجها يُستخدم تقويم حسابي بديل.
• بداية الشهور مثل رمضان وشوال تُعلن برؤية الهلال، فقد يختلف التاريخ المعلن عن التاريخ المحسوب في التقويم.
• للإفصاح: قارنت نتائج toHijri بجدول أم القرى في مكتبة مفتوحة المصدر أعمل عليها، لكل يوم من 2020 إلى 2035، فتطابقت كلها.
• أضف أزرار «الشهر السابق» و«التالي» باستدعاء renderCalendar بالشهر الجديد.