Cara Mendapatkan Tanggal Hijriyah di JavaScript dengan dan tanpa Library

Mendapatkan tanggal Hijriyah dalam aplikasi JavaScript dapat dilakukan dengan atau tanpa menggunakan pustaka tambahan seperti moment-hijri. Berikut ini adalah panduan untuk kedua pendekatan tersebut.

Menggunakan Pustaka (Library) moment-hijri

moment-hijri adalah plugin untuk pustaka moment.js yang memungkinkan manipulasi tanggal berdasarkan kalender Hijriyah. Pustaka ini menggunakan perhitungan Umm al-Qura untuk konversi tanggal. NPM

Langkah pertama
Pastikan Anda telah menginstal moment.js dan tambahkan moment-hijri ke dalam proyek Anda menggunakan npm:

npm install moment-hijri

Langkah kedua
Setelah instalasi, Anda dapat menggunakan moment-hijri untuk mendapatkan tanggal Hijriyah:

Tambahkan .locale("en") agar angka menggunakan format Latin.

const moment = require("moment-hijri");

function getHijriDate(dateString, language = "id") {
    const hijriDate = moment(dateString, "YYYY-MM-DD").locale("en").format("iD iMMMM iYYYY");

    // Daftar nama bulan dalam bahasa Indonesia
    const bulanHijriyahID = {
        "Muharram": "Muharram",
        "Safar": "Shafar",
        "Rabi'ul Awwal": "Rabiul Awal",
        "Rabi'ul Akhir": "Rabiul Akhir",
        "Jumada al-Awwal": "Jumadil Awal",
        "Jumada al-Thani": "Jumadil Akhir",
        "Rajab": "Rajab",
        "Sha'ban": "Sya'ban",
        "Ramadan": "Ramadhan",
        "Shawwal": "Syawal",
        "Dhul-Qa'dah": "Dzulqa'dah",
        "Dhul-Hijjah": "Dzulhijjah"
    };

    // Daftar nama bulan dalam bahasa Inggris
    const bulanHijriyahEN = {
        "Muharram": "Muharram",
        "Safar": "Safar",
        "Rabi'ul Awwal": "Rabi' al-Awwal",
        "Rabi'ul Akhir": "Rabi' al-Thani",
        "Jumada al-Awwal": "Jumada al-Awwal",
        "Jumada al-Thani": "Jumada al-Thani",
        "Rajab": "Rajab",
        "Sha'ban": "Sha'ban",
        "Ramadan": "Ramadan",
        "Shawwal": "Shawwal",
        "Dhul-Qa'dah": "Dhul-Qa'dah",
        "Dhul-Hijjah": "Dhul-Hijjah"
    };

    let bulanHijriyah = language === "en" ? bulanHijriyahEN : bulanHijriyahID;

    // Konversi nama bulan berdasarkan bahasa yang dipilih
    let formattedHijriDate = hijriDate;
    Object.keys(bulanHijriyah).forEach(bulan => {
        formattedHijriDate = formattedHijriDate.replace(bulan, bulanHijriyah[bulan]);
    });

    return formattedHijriDate + " H";
}

// Contoh penggunaan
console.log(getHijriDate("2025-03-03", "id")); // Output: "3 Ramadhan 1446 H"
console.log(getHijriDate("2025-03-03", "en")); // Output: "3 Ramadhan 1446 H"

Kode di atas akan menampilkan tanggal Hijriyah saat ini dalam format "iD iMMMM iYYYY", misalnya "12 Sya'ban 1446 H".

Tanpa Menggunakan Pustaka (Library) Tambahan

Jika Anda ingin menghindari penggunaan pustaka eksternal, JavaScript menyediakan objek Date yang dapat dimanfaatkan bersama dengan Intl.DateTimeFormat untuk mendapatkan tanggal Hijriyah. Namun, perlu dicatat bahwa dukungan untuk kalender Hijriyah melalui Intl.DateTimeFormat mungkin belum tersedia di semua lingkungan JavaScript.

Berikut adalah contoh kode Javascript-nya

function getHijriDate(dateString, language = "id") {
    const date = new Date(dateString);
    
    // Format tanggal dalam kalender Hijriyah dengan bahasa Arab
    const hijriDate = new Intl.DateTimeFormat("ar-TN-u-ca-islamic", {
        day: "numeric",
        month: "long",
        year: "numeric"
    }).formatToParts(date);

    // Peta nama bulan Hijriyah dalam bahasa Indonesia
    const bulanHijriyahID = {
        "محرم": "Muharram",
        "صفر": "Shafar",
        "ربيع الأول": "Rabiul Awal",
        "ربيع الآخر": "Rabiul Akhir",
        "جمادى الأولى": "Jumadil Awal",
        "جمادى الآخرة": "Jumadil Akhir",
        "رجب": "Rajab",
        "شعبان": "Sya'ban",
        "رمضان": "Ramadhan",
        "شوال": "Syawal",
        "ذو القعدة": "Dzulqa'dah",
        "ذو الحجة": "Dzulhijjah"
    };

    // Peta nama bulan Hijriyah dalam bahasa Inggris
    const bulanHijriyahEN = {
        "محرم": "Muharram",
        "صفر": "Safar",
        "ربيع الأول": "Rabi' al-Awwal",
        "ربيع الآخر": "Rabi' al-Thani",
        "جمادى الأولى": "Jumada al-Awwal",
        "جمادى الآخرة": "Jumada al-Thani",
        "رجب": "Rajab",
        "شعبان": "Sha'ban",
        "رمضان": "Ramadan",
        "شوال": "Shawwal",
        "ذو القعدة": "Dhul-Qa'dah",
        "ذو الحجة": "Dhul-Hijjah"
    };

    let day, month, year;
    
    // Loop hasil format untuk mengambil nilai numerik dan teks
    hijriDate.forEach(part => {
        if (part.type === "day") day = part.value;
        if (part.type === "month") {
            month = language === "en" ? bulanHijriyahEN[part.value] : bulanHijriyahID[part.value];
        }
        if (part.type === "year") year = part.value;
    });

    return `${day} ${month} ${year} H`;
}

// Contoh penggunaan
console.log(getHijriDate("2025-03-03", "id")); // Output: "3 Ramadhan 1446 H"
console.log(getHijriDate("2025-03-03", "en")); // Output: "3 Ramadhan 1446 H"

Kesimpulan

Memperoleh tanggal Hijriyah dalam JavaScript dapat dilakukan dengan menggunakan pustaka moment-hijri untuk kemudahan dan fungsionalitas tambahan. Alternatifnya, Anda dapat memanfaatkan fitur bawaan JavaScript seperti Intl.DateTimeFormat untuk mendapatkan tanggal Hijriyah tanpa pustaka eksternal, meskipun perlu diperhatikan kompatibilitasnya di berbagai lingkungan. Pilihlah metode yang paling sesuai dengan kebutuhan dan konteks proyek Anda.

Mungkin cukup sekian dulu untuk pembahasan kali ini, semoga bermanfaat, Terimakasih :)