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

Islamic Date and Month Today in Pakistan & Globally

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

Latest Fuel Prices Today in Pakistan

Latest Fuel Prices Today in Pakistan

Leave a Reply Cancel reply

Must Read

Parliament passes important defence command bills

Record of expenses on National Assembly’s legal fees revealed

PM Shehbaz Sharif welcomes Trump’s support for the Mecca defence deal

Weekly inflation reaches 9.11 percent

NADRA makes important changes in the ID card system

Related News

What time will Punjab schools open from August 24

Passport service is now a new facility in eight cities till 12 midnight

Important progress on Imran Khan’s transfer to Shifa Hospital

Punjab agrees to hold local body elections between December and January

Parliament passes important defence command bills

Useful Categories

Useful Links

Contact Us!

Islamic Date Today

Related posts

Today’s Islamic Date

---

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

Latest Fuel Prices Today in Pakistan

Leave a Reply Cancel reply

Must Read

Related News

Useful Categories

Useful Links

Contact Us!