Tutorial Kalkulator Umur - Menerapkan Rumus Kalkulator Umur

Bagian ini adalah yang utama, dimana kita akan mengetahui bagaimana cara mendapatkan perhitungan umur yang diinginkan

JavaScript Date Object

Setiap bahasa pemrograman memiliki sebuah objek bawaan untuk mengelola tanggal. Begitu juga JavaScript, sebagai salah satu bahasa pemrograman untuk website, dia juga memiliki objek tanggal yang bisa kita gunakan untuk mengelola tanggal.

Mari kita coba terlebih dahulu bagaimana cara kerja dari Date Object di dalam JavaScript. Kita bisa melakukannya di dalam console pada fitur developer tools yang ada pada setiap browser

Gambar: Membuka Console pada Browser

Kita mulai dengan memanggil objek Date() di dalam console.

> Date()
'Wed Jan 01 2025 10:00:00 GMT+0700 (Western Indonesia Time)'

> new Date()
Wed Jan 01 2025 10:00:00 GMT+0700 (Western Indonesia Time)

Objek Date() ketika dipanggil akan menghasilkan keluaran berupa teks tanggal terkini dengan format lengkap seperti pada gambar. Jika ingin menghasilkan keluaran tanggal lain, maka kita harus membuat objek baru dengan kata kunci new diikuti dengan class Date() yang berisi teks tanggal dengan format yyyy-mm-dd.

Menghitung Selisih Antara Dua Tanggal

Jika kita ingin mengetahui umur saat ini, berarti kita harus menemukan selisih antara tanggal saat ini dengan tanggal lahir yang kita masukkan. Berikut adalah simulasinya

const today = new Date(); // Tanggal saat ini
const birthDate = new Date('1990-01-01'); // Tanggal lahir
const age = today - birthDate; // Selisih dalam milidetik
console.log(age);

// Contoh output: 1104537600000 (contoh output)

Hasil keluaran dari selisih dua tanggal tersebut bernilai milidetik (millisecond). Nilai inilah yang akan kita ubah ke dalam bentuk tahun, bulan dan tanggal.

Konversi dari Milidetik ke Tahun

Untuk bisa mendapatkan nilai tahun, kita harus memahami dulu perbandingan berikut ini:

• 1000 milidetik = 1 detik
• 60 detik = 1 menit
• 60 menit = 1 jam
• 24 jam = 1 hari
• 365.25 hari = 1 tahun

Maka kita akan menemukan rumus untuk mengubah dari milidetik ke tahun sebagai berikut

xtahun = xmilidetik / 1000 / 60 / 60 / 24 / 365.25

Misalkan kita ingin mengetahui umur tepatnya negara Indonesia semenjak diproklamirkannya kemerdekaan pada tanggal 17 Agustus 1945 (tulisan ini dibuat pada tanggal 1 Januari 2025). Maka hasil perhitungannya kan seperti ini

const today = new Date('2025-01-01'); // Tanggal saat ini
const birthDate = new Date('1945-08-17'); // Tanggal kemerdekaan Indonesia
const age = today - birthDate; // Selisih dalam milidetik
console.log(age);
// Output: 2504908800000

xyears = age / 1000 / 60 / 60 / 24 / 365.25;
console.log(xyears);
// Output: 79.37577002053388

Umur Indonesia saat tutorial ini dibuat (1 Januari 2025) adalah 79.37577002053388 tahun. Ini artinya tidak genap 79 tahun, melainkan 79 tahun dan 0.375xxx tahun yang masih bisa kita dapatkan nilai bulan yang terdapat pada nilai tersebut.

const today = new Date('2025-01-01'); // Tanggal saat ini
const birthDate = new Date('1945-08-17'); // Tanggal kemerdekaan Indonesia
const age = today - birthDate; // Selisih dalam milidetik
console.log(age);
// Output: 2504908800000

xyears = age / 1000 / 60 / 60 / 24 / 365.25;
console.log(xyears);
// Output: 79.37577002053388

// nilai sisa pecahan tahun dikali 12
// karena 1 tahun = 12 bulan
const xmonths = (xyears - Math.floor(xyears)) * 12;
console.log(xmonths);
// Output: 4.509240246406534

Function Math.floor() digunakan untuk membulatkan angka pecahan ke bawah.

Saat ini kita temukan bahwa umur Indonesia adalah 79 tahun dan 4.5154210362004505 bulan. Nilai bulan yang didapatkan tidak genap, sehingga kita bisa masih mendapatkan jumlah hari dari 0.515xxx bulan.

const today = new Date('2025-01-01'); // Tanggal saat ini
const birthDate = new Date('1945-08-17'); // Tanggal kemerdekaan Indonesia
const age = today - birthDate; // Selisih dalam milidetik
console.log(age);
// output: 2504908800000

xyears = age / 1000 / 60 / 60 / 24 / 365.25;
console.log(xyears);
// output: 79.37577002053388

// nilai sisa pecahan tahun dikali 12
// karena 1 tahun = 12 bulan
const xmonths = (xyears - Math.floor(xyears)) * 12;
console.log(xmonths);
// output: 4.509240246406534

// nilai sisa pecahan bulan dikali 30.5
// karena 1 bulan = 30.5 hari (rata-rata) dalam setahun

const xdays = (xmonths - Math.floor(xmonths)) * 30.5;
// output: 15.5318275153993

Sampai dengan tahap ini kita sudah mendapatkan nilai umur Indonesia adalah 79 tahun 4 bulan dan 15 hari.

Menerapkan Rumus ke dalam Aplikasi

Setelah kita sudah memahami bagaimana cara mendapatkan nilai umurnya, sekarang kita terapkan ke dalam aplikasi yang kalkulator umur.

Pertama kita pastika elemen form memiliki atribut dan nilai berikut

• method="post"
• onsubmit="return caculateAge()"

. . .
<article>
    <form method="post" onsubmit="return calculateAge()">
        <label for="date">Tanggal Lahir
            <input id="date" type="date" name="date">
            <small id="help-text"></small>
        </label>                
        <input type="submit" name="submit" value="Hitung">
    </form>
    <p id="result"></p>
</article>
. . .

Atribut method bernilai post, berfungsi agar nilai tanggal yang dimasukkan tidak tercatat sebagai parameter pada URL.

Atribut onsubmit bernilai return caculateAge(), agar ketika menekan tombol submit, form akan memproses datanya ke dalam function JavasScript yang kita miliki. Dan function ini juga akan memiliki nilai balikan berupa false, sehingga form atau halaman website tidak memproses data dalam formulir ke tempat lain.

<script type="text/javascript">
    
    const root = document.querySelector("html");
    const currentDark = window.matchMedia("(prefers-color-scheme: dark)");
    const darkModeToggle = document.getElementById("darkmode-toggle");

    const inputDate = document.getElementById("date");
    const result = document.getElementById("result");
    const today = new Date();

    // . . .

    function calculateAge(){
        const age = today - new Date(inputDate.value);
        const xyears = age/1000/60/60/24/365.25;
        const xmonths = (xyears - Math.floor(xyears))*12;
        const xdays = (xmonths - Math.floor(xmonths))*30.5;

        result.innerHTML = "Umur kamu adalah <br>";
        result.innerHTML += Math.floor(xyears) + " tahun ";
        result.innerHTML += Math.floor(xmonths) + " bulan ";
        result.innerHTML += Math.floor(xdays) + " hari";

        return false;
    }

</script>

Yang dilakukan script tersebut adalah

1. Mengambil elemen input tanggal lahir
2. Mengambil elemen result
3. Membuat objek tanggal hari terkini
4. Menjalankan rumus penghitungan umur di dalam function calculateAge(). Dengan rincian sebagai berikut:
   • Menerapkan rumus penghitungan umur
   • Menampilkan nilai umur ke dalam elemen result
   • Menghasilkan nilai balikan berupa false, agar form tidak diproses ke tempat lain

Sampai dengan tahap ini, aplikasi kalkulator umur sudah bisa berjalan dengan baik.

Kode lengkap dari tahap ini dapat dilihat di sini.