Live Tool: Kalkulator ISO 8601 Week Number JavaScript
Bosan meraba-raba logika penanggalan yang njelimet? Halaman ini menyajikan tool interaktif yang langsung mengeksekusi script Vanilla JavaScript untuk menghitung standar ISO 8601 Week Number.
Mendapatkan task untuk membangun fitur pelaporan mingguan di dashboard terkadang menjadi jebakan tak terduga bagi Frontend Developer. Secara sekilas, menghitung "minggu ke-berapa" terdengar sesederhana membagi total hari dengan angka tujuh. Namun di dunia nyata, industri menggunakan standar ketat bernama ISO 8601.
Standar ini punya aturan saklek: sebuah minggu hanya diakui sebagai "Minggu ke-1" jika ia memiliki hari Kamis pertama di tahun tersebut. Daripada pusing membayangkan teorinya, mari kita langsung buktikan cara kerja algoritma ini melalui kalkulator interaktif di bawah.

Uji Coba Kalkulator Live
Di bawah ini adalah eksekusi langsung dari fungsi JavaScript yang akan kita bahas. Secara default, skrip membaca tanggal hari ini. Kamu juga bisa memilih tanggal apa saja secara manual untuk melihat hasilnya secara real-time.
🗓️ Info Tanggal Hari Ini
Saat ini adalah: Memuat data...
Berdasarkan standar ISO 8601, hari ini masuk di Minggu ke-...
🔍 Cek Manual Tanggal Lain
Bedah Kode JavaScript Murni
Kamu nggak perlu mengunduh library bongsor seperti Moment.js atau date-fns hanya untuk mengeksekusi fitur sesederhana ini. Berikut adalah source code asli yang berjalan di balik kalkulator interaktif di atas.
Algoritma Utama
Fungsi getWeekNumber() di bawah bertugas memanipulasi salinan objek tanggal (agar aman dari mutasi reference) dan menggesernya paksa ke hari Kamis. Setelah itu, kita jadikan tanggal 4 Januari sebagai garis start absolut untuk mulai menghitung selisih milidetiknya.
<script>
/**
* Fungsi buat ngitung ISO 8601 Week Number
* Nggak bisa cuma dibagi 7, karena standar ISO netapin minggu ke-1
* adalah minggu yang punya hari Kamis pertama di tahun tersebut.
*/
function getWeekNumber(d) {
// Copy tanggal biar nggak ngubah referensi asli
const date = new Date(d.getTime());
// Set jam ke 00:00:00 biar aman dari offset zona waktu
date.setHours(0, 0, 0, 0);
// Geser ke hari Kamis di minggu yang sama (Minggu=0, Senin=1, dst)
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
// Ambil tanggal 4 Januari dari tahun yang udah digeser (pasti masuk minggu 1)
const week1 = new Date(date.getFullYear(), 0, 4);
// Hitung selisih hari, lalu bagi 7 dapet deh minggu ke berapa
return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
}
// Nampilin data hari ini pas halaman diload
const today = new Date();
const currentWeek = getWeekNumber(today);
// Injeksi angka ke elemen HTML
document.getElementById('current-week').innerText = currentWeek;
// Bikin format tanggalnya lebih manusiawi (bahasa Indo)
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('current-date-info').innerText = today.toLocaleDateString('id-ID', options);
// Dengerin perubahan di kotak input tanggal
const dateInput = document.getElementById('custom-date');
const customResult = document.getElementById('custom-result');
dateInput.addEventListener('change', function(e) {
if (this.value) {
const selectedDate = new Date(this.value);
const weekNum = getWeekNumber(selectedDate);
customResult.innerText = `Mantap, tanggal itu masuk di minggu ke-${weekNum} lur!`;
} else {
customResult.innerText = '';
}
});
</script> Penjelasan Teknis Penggeseran Hari
Rahasia utamanya ada di baris date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);. Rumus modulus ini akan selalu menarik tanggal berapapun yang kita pilih tepat menuju hari Kamis pada minggu yang sama. Setelah mesin berhasil "berpijak" di hari Kamis, menghitung jarak hari ke tanggal 4 Januari (sebagai patokan permanen minggu pertama) menjadi perhitungan selisih matematika dasar biasa.
Kesimpulan Integrasi DOM
Mengintegrasikan perhitungan ISO 8601 ke dalam DOM HTML secara live membuktikan bahwa Vanilla JavaScript sudah sangat mumpuni untuk menangani manipulasi tanggal. Penggunaan event listener tipe change pada elemen kalender <input type="date"> menjamin perhitungan angka minggu langsung di-render ke antarmuka pengguna tanpa memicu reload halaman.
Silakan copas kerangka script di atas ke dalam proyekmu, dan ucapkan selamat tinggal pada kutu (bug) perhitungan minggu ke-53 yang sering muncul di akhir tahun!