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

Punjabi Date Today in Pakistan – Desi Mahina, Punjabi Calendar & Ajj Di Tareekh

Latest Fuel Prices Today in Pakistan

Muhammad Ali (Web Desk Reporter)

Latest Fuel Prices Today in Pakistan

Leave a Reply Cancel reply

Pakistan Committed to Safeguarding Saudi Arabia’s Security and Sovereignty

PTI stresses on reducing political tension and moving forward with talks

Petrol cheaper and diesel expensive, notification of new prices issued

Pakistan Stock Exchange’s KSE-100 index closes at 167,089

Gold price records another big increase for the second day

Useful Categories

Useful Links

Contact Us!

Islamic Date Today

Today’s Islamic Date

---

Punjabi Date Today in Pakistan – Desi Mahina, Punjabi Calendar & Ajj Di Tareekh

Latest Fuel Prices Today in Pakistan

Muhammad Ali (Web Desk Reporter)

Latest Fuel Prices Today in Pakistan

Leave a Reply Cancel reply

Pakistan Committed to Safeguarding Saudi Arabia’s Security and Sovereignty

PTI stresses on reducing political tension and moving forward with talks

Petrol cheaper and diesel expensive, notification of new prices issued

Pakistan Stock Exchange’s KSE-100 index closes at 167,089

Gold price records another big increase for the second day

Useful Categories

Useful Links

Contact Us!