Islamic Date Today

Islamic Date Today tailwind.config = { theme: { extend: { fontFamily: { sans: ['Poppins', 'sans-serif'], }, colors: { emerald: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22', } } } } } body { font-family: 'Poppins', sans-serif; background-color: #f8fafc; }

Islamic Date Today Live Gregorian & Hijri Date Converter

--:--:-- PKT

Today's Islamic Date Live localized comparison

Gregorian Date ---

Pakistan Hijri Date --- 🌙

Saudi / Global Hijri ---

const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", startYear: 2026, startMonth: 5, startDay: 15, length: 30 }, { id: 2, name: "Safar", startYear: 2026, startMonth: 6, startDay: 15, length: 29 }, { id: 3, name: "Rabi' al-Awwal", startYear: 2026, startMonth: 7, startDay: 13, length: 29 }, { id: 4, name: "Rabi' al-Thani", startYear: 2026, startMonth: 8, startDay: 11, length: 30 }, { id: 5, name: "Jumada al-Awwal", startYear: 2026, startMonth: 9, startDay: 11, length: 30 }, { id: 6, name: "Jumada al-Thani", startYear: 2026, startMonth: 10, startDay: 10, length: 29 }, { id: 7, name: "Rajab", startYear: 2026, startMonth: 11, startDay: 9, length: 30 }, { id: 8, name: "Sha'ban", startYear: 2027, startMonth: 0, startDay: 8, length: 30 }, { id: 9, name: "Ramadan", startYear: 2027, startMonth: 1, startDay: 7, length: 30 }, { id: 10, name: "Shawwal", startYear: 2027, startMonth: 2, startDay: 9, length: 29 }, { id: 11, name: "Dhu al-Qadah", startYear: 2027, startMonth: 3, startDay: 7, length: 30 }, { id: 12, name: "Dhu al-Hijjah", startYear: 2027, startMonth: 4, startDay: 7, length: 29 } ];

function getDetailedHijriDate(date, offsetDays = 0) { const adjustedDate = new Date(date); adjustedDate.setDate(adjustedDate.getDate() + offsetDays); adjustedDate.setHours(0,0,0,0);

let matchedMonthIndex = -1; let currentDayOfHijriMonth = -1;

for (let i = 0; i < ISLAMIC_MONTH_DATA.length; i++) { const monthInfo = ISLAMIC_MONTH_DATA[i]; const monthStartDate = new Date(monthInfo.startYear, monthInfo.startMonth, monthInfo.startDay); monthStartDate.setHours(0,0,0,0); const monthEndDate = new Date(monthStartDate); monthEndDate.setDate(monthEndDate.getDate() + monthInfo.length);

if (adjustedDate >= monthStartDate && adjustedDate < monthEndDate) { matchedMonthIndex = i; const diffTime = Math.abs(adjustedDate - monthStartDate); currentDayOfHijriMonth = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1; break; } }

if (matchedMonthIndex === -1) { if (adjustedDate < new Date(2026, 5, 15)) { return { day: 29, monthName: "Dhu al-Hijjah", year: 1447 }; } return { day: 1, monthName: "Muharram", year: 1449 }; }

return { day: currentDayOfHijriMonth, monthName: ISLAMIC_MONTH_DATA[matchedMonthIndex].name, year: 1448 }; }

function updateIslamicDates() { const today = new Date();

// 1. Gregorian Date document.getElementById("gregorian-date").innerText = today.toLocaleDateString('en-PK', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });

// 2. Global Hijri Date const worldHijri = getDetailedHijriDate(today, 0); document.getElementById("world-date").innerText = `${worldHijri.day} ${worldHijri.monthName}, ${worldHijri.year} AH`;

// 3. Pakistan Local Hijri Date (-1 day offset) const pakistanHijri = getDetailedHijriDate(today, -1); document.getElementById("pakistan-date").innerText = `${pakistanHijri.day} ${pakistanHijri.monthName} ${pakistanHijri.year} AH`; }

updateIslamicDates(); runLiveClock(); setInterval(runLiveClock, 1000);

Islamic Months (Hijri) Directory * { font-family: 'Poppins', sans-serif; } body { background-color: #f8fafc; }

Islamic Months (Hijri) Today: Loading date...

12 Months

🌙 -- Month Current Month --- --- Loading description...

// Data model for the 12 Islamic Months (1448 AH Timeline) const ISLAMIC_MONTHS = [ { id: 1, name: "Muharram", arabic: "المحرّم", sacred: true, startYear: 2026, startMonth: 5, startDay: 15, length: 30, desc: "1st Hijri month. One of the four sacred months in Islam." }, { id: 2, name: "Safar", arabic: "صفر", sacred: false, startYear: 2026, startMonth: 6, startDay: 15, length: 29, desc: "2nd Hijri month, following Muharram." }, { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", sacred: false, startYear: 2026, startMonth: 7, startDay: 13, length: 29, desc: "3rd month, notable for Mawlid and the birth of Prophet Muhammad (PBUH)." }, { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", sacred: false, startYear: 2026, startMonth: 8, startDay: 11, length: 30, desc: "4th month of the Islamic lunar calendar." }, { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", sacred: false, startYear: 2026, startMonth: 9, startDay: 11, length: 30, desc: "5th month in the Islamic Hijri calendar." }, { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", sacred: false, startYear: 2026, startMonth: 10, startDay: 10, length: 29, desc: "6th month of the Islamic calendar." }, { id: 7, name: "Rajab", arabic: "رجب", sacred: true, startYear: 2026, startMonth: 11, startDay: 9, length: 30, desc: "7th month and one of the four sacred months, preceding Sha'ban and Ramadan." }, { id: 8, name: "Sha'ban", arabic: "شعبان", sacred: false, startYear: 2027, startMonth: 0, startDay: 8, length: 30, desc: "8th month, preceding Ramadan and containing Laylat al-Bara'at." }, { id: 9, name: "Ramadan", arabic: "رمضان", sacred: false, startYear: 2027, startMonth: 1, startDay: 7, length: 30, desc: "Holy 9th month during which Muslims fast from dawn until sunset worldwide." }, { id: 10, name: "Shawwal", arabic: "شوال", sacred: false, startYear: 2027, startMonth: 2, startDay: 9, length: 29, desc: "10th month, commencing with the celebration of Eid al-Fitr." }, { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", sacred: true, startYear: 2027, startMonth: 3, startDay: 7, length: 30, desc: "11th month and one of the four sacred months in Islam." }, { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", sacred: true, startYear: 2027, startMonth: 4, startDay: 7, length: 29, desc: "12th month in which the Hajj pilgrimage takes place along with Eid al-Adha." } ];

let selectedMonthIndex = 0; let realCurrentMonthIndex = 0;

// Auto-detect current Hijri month based on system/today's date function detectCurrentHijriMonth() { const today = new Date(); today.setHours(0, 0, 0, 0);

for (let i = 0; i < ISLAMIC_MONTHS.length; i++) { const month = ISLAMIC_MONTHS[i]; const startDate = new Date(month.startYear, month.startMonth, month.startDay); startDate.setHours(0, 0, 0, 0);

const endDate = new Date(startDate); endDate.setDate(endDate.getDate() + month.length);

if (today >= startDate && today < endDate) { return i; } } return 1; // Default fallback to Safar }

// Render all month block elements into the grid container function renderIslamicMonths() { const container = document.getElementById("islamic-months-container"); if (!container) return;

container.innerHTML = "";

ISLAMIC_MONTHS.forEach((month, index) => { const isSelected = index === selectedMonthIndex; const isCurrentMonth = index === realCurrentMonthIndex;

// Outer block element (Card) const card = document.createElement("div"); card.className = `p-2 rounded-lg border flex items-center justify-between cursor-pointer transition-all duration-150 relative ${ isSelected ? "bg-emerald-600 border-emerald-700 text-white shadow-sm font-medium" : isCurrentMonth ? "bg-emerald-50 border-emerald-300 text-emerald-950 font-medium" : "bg-white border-slate-200 text-slate-700 hover:border-emerald-300 hover:bg-emerald-50/30" }`;

card.onclick = () => selectIslamicMonth(index);

// Inner block content (Compact for Mobile) card.innerHTML = ` <span class="flex items-center justify-center w-4 h-4 text-[9px] rounded font-bold shrink-0 ${ isSelected ? "bg-emerald-800 text-emerald-100" : isCurrentMonth ? "bg-emerald-600 text-white" : "bg-slate-100 text-slate-500" }"> ${String(month.id).padStart(2, "0")} ${month.name} ${isCurrentMonth ? ` ` : ''} ${isCurrentMonth ? 'Active' : (month.sacred ? 'Sacred' : 'Hijri')} ${month.arabic} `;

container.appendChild(card); });

updateDetailCard(ISLAMIC_MONTHS[selectedMonthIndex]); }

// Click handler to switch selected month view function selectIslamicMonth(index) { selectedMonthIndex = index; renderIslamicMonths(); }

// Format ordinal numbers (1st, 2nd, etc.) function getOrdinal(n) { const s = ["th", "st", "nd", "rd"]; const v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); }

// Update detail card display function updateDetailCard(month) { const isCurrentMonth = selectedMonthIndex === realCurrentMonthIndex;

document.getElementById("detail-number").innerText = `${getOrdinal(month.id)} Hijri Month`; document.getElementById("detail-name").innerText = month.name; document.getElementById("detail-arabic").innerText = month.arabic; document.getElementById("detail-description").innerText = month.desc;

const currentBadge = document.getElementById("detail-current-badge"); if (isCurrentMonth) { currentBadge.classList.remove("hidden"); } else { currentBadge.classList.add("hidden"); } }

// Initialize on page load document.addEventListener("DOMContentLoaded", () => { const today = new Date(); document.getElementById("today-gregorian-text").innerText = `Today: ${today.toLocaleDateString('en-US', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })}`;

// Auto-detect real current Islamic month & highlight it automatically realCurrentMonthIndex = detectCurrentHijriMonth(); selectedMonthIndex = realCurrentMonthIndex;

renderIslamicMonths(); });

Islamic Date Today