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(); });

Mobile Islamic Calendar - Pakistan 1448 AH * { font-family: 'Poppins', sans-serif; box-sizing: border-box; } body { background-color: #f8fafc; overflow-x: hidden; }

🌙 Pakistan Date Today 26 Safar 1448 AH Gregorian 10 Aug 2026

Hijri Month Safar 1448 AH

صفر

Mon Tue Wed Thu Fri Sat Sun

Pakistan Date 16 Jul - 13 Aug 2026

// Islamic Months Dataset (1448 AH) adjusted for Pakistan Sighting Timeline const ISLAMIC_MONTH_DATA = [ { id: 1, name: "Muharram", arabic: "المحرّم", startYear: 2026, startMonth: 5, startDay: 16, length: 30 }, { id: 2, name: "Safar", arabic: "صفر", startYear: 2026, startMonth: 6, startDay: 16, length: 29 }, // Safar 26 = 10 Aug 2026 { id: 3, name: "Rabi' al-Awwal", arabic: "ربيع الأول", startYear: 2026, startMonth: 7, startDay: 14, length: 29 }, { id: 4, name: "Rabi' al-Thani", arabic: "ربيع الآخر", startYear: 2026, startMonth: 8, startDay: 12, length: 30 }, { id: 5, name: "Jumada al-Awwal", arabic: "جمادى الأولى", startYear: 2026, startMonth: 9, startDay: 12, length: 30 }, { id: 6, name: "Jumada al-Thani", arabic: "جمادى الآخرة", startYear: 2026, startMonth: 10, startDay: 11, length: 29 }, { id: 7, name: "Rajab", arabic: "رجب", startYear: 2026, startMonth: 11, startDay: 10, length: 30 }, { id: 8, name: "Sha'ban", arabic: "شعبان", startYear: 2027, startMonth: 0, startDay: 9, length: 30 }, { id: 9, name: "Ramadan", arabic: "رمضان", startYear: 2027, startMonth: 1, startDay: 8, length: 30 }, { id: 10, name: "Shawwal", arabic: "شوال", startYear: 2027, startMonth: 2, startDay: 10, length: 29 }, { id: 11, name: "Dhu al-Qadah", arabic: "ذو القعدة", startYear: 2027, startMonth: 3, startDay: 8, length: 30 }, { id: 12, name: "Dhu al-Hijjah", arabic: "ذو الحجة", startYear: 2027, startMonth: 4, startDay: 8, length: 29 } ];

// Specific Target: 26 Safar 1448 const PAKISTAN_TARGET_MONTH_IDX = 1; // Safar const PAKISTAN_TARGET_DAY = 26; // 26 Safar

let currentActiveMonthIdx = PAKISTAN_TARGET_MONTH_IDX;

// Render Mobile-Optimized Grid function renderCalendarDaysGrid(monthIndex) { const gridContainer = document.getElementById("calendar-days-grid"); if (!gridContainer) return;

gridContainer.innerHTML = ""; const monthInfo = ISLAMIC_MONTH_DATA[monthIndex];

// Update Titles document.getElementById("calendar-month-title").innerText = `${monthInfo.name} 1448 AH`; document.getElementById("calendar-month-arabic").innerText = monthInfo.arabic;

const startGregorian = new Date(monthInfo.startYear, monthInfo.startMonth, monthInfo.startDay); // Day of Week Offset (0 = Monday, 6 = Sunday) let startDayOfWeek = startGregorian.getDay(); startDayOfWeek = (startDayOfWeek === 0) ? 6 : startDayOfWeek - 1;

// 1. Render Offset Blank Cells for (let i = 0; i < startDayOfWeek; i++) { const emptyCell = document.createElement("div"); emptyCell.className = "bg-slate-50/50 border border-transparent rounded-md aspect-square"; gridContainer.appendChild(emptyCell); }

// 2. Render Hijri Day Cells for (let day = 1; day <= monthInfo.length; day++) { const dayCell = document.createElement("div"); const currentGregDate = new Date(startGregorian); currentGregDate.setDate(startGregorian.getDate() + (day - 1));

const isPakistanDate = (monthIndex === PAKISTAN_TARGET_MONTH_IDX && day === PAKISTAN_TARGET_DAY);

dayCell.className = `flex flex-col justify-between p-1 rounded-md border text-center transition-all aspect-square relative ${ isPakistanDate ? 'bg-emerald-600 border-emerald-700 text-white font-bold ring-2 ring-emerald-400' : 'bg-white border-slate-100 hover:border-emerald-200 hover:bg-slate-50/80 text-slate-800' }`;

const gregDayNum = currentGregDate.getDate();

dayCell.innerHTML = ` ${day} ${gregDayNum} ${isPakistanDate ? ` PK ` : ''} `;

gridContainer.appendChild(dayCell); }

// Update Date Range const endGregorian = new Date(startGregorian); endGregorian.setDate(startGregorian.getDate() + (monthInfo.length - 1)); document.getElementById("calendar-date-range").innerText = `${startGregorian.toLocaleDateString('en-US', { day: 'numeric', month: 'short' })} - ${endGregorian.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })}`; }

// Navigation function navigateMonth(direction) { let nextIndex = currentActiveMonthIdx + direction; if (nextIndex >= 0 && nextIndex < ISLAMIC_MONTH_DATA.length) { currentActiveMonthIdx = nextIndex; renderCalendarDaysGrid(currentActiveMonthIdx); } }

// Initialize document.addEventListener("DOMContentLoaded", () => { renderCalendarDaysGrid(currentActiveMonthIdx); });

Islamic Date Today

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

Islamic Date and Month Today in Pakistan & Globally

Iran imposes new condition on US talks: Abbas Araqchi

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

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

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

---

26 Safar 1448 AH

Safar 1448 AH

Iran imposes new condition on US talks: Abbas Araqchi

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

Leave a Reply Cancel reply

Must Read

Related News

Useful Categories

Useful Links

Contact Us!