Jurnal Web .com

Cara menghitung umur berdasarkan tanggal lahir dengan Javascript | Pernah sekali waktu saya diminta oleh teman untuk membuat aplikasi yang di dalam aplikasi tersebut ada sebuah fitur yang berfungsi untuk mengetahui atau menghitung menghitung berapa umur seseorang jika dia menginput tanggal lahirnya pada sebuah field.

Fungsi yang digunakan pada aplikasi tersebut cukup berguna dan mungkin juga berguna untuk Anda yang sedang membutuhkan script dengan keperluan serupa.

Dalam tutorial ini kita akan membuat sebuah contoh singkat bagaimana cara mengetahui usia berdasarkan tanggal lahir dengan menggunakan JavaScript.

Kode ini akan menghitung usia seseorang dengan memasukkan tanggal lahir seseorang di kotak teks. Kode itu sendiri menggunakan fungsi new Date () untuk menghitung usia dengan mendapatkan perbedaan antara hari ini dan tanggal yang dimasukkan.

Kode ini bisa Anda gunakan secara gratis, Anda dapat memodifikasinya sebagai milik Anda.

Kami akan menggunakan JavaScript sebagai bahasa skrip sisi server karena memungkinkan kontrol yang lebih besar terhadap perilaku halaman web Anda daripada hanya HTML.

Itu tertanam dalam HTML yang bertanggung jawab untuk memungkinkan pengguna untuk berinteraksi dengan komputer.

Mulai

Pertama Anda harus mendownload atau memasukan framework bootstrap yang berfungsi untuk membuat layoutnya.

Tampilan Utama

Kode dibawah akan menghasilkan tampilan aplikasi, Anda cukup membuat sebuah file index.html dan masukan script berikut di bagian body, dan jangan lupa sertakan Bootstrap dan jQuery dibagian head nya.

Bootstrap & Jquery

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Script di body html

	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Jurnalweb.com - Menghitung Umur Berdasarkan Tanggal Lahir</h3>
      <p>Baca tutorial lengkapnya disini</p>
        <hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<div class="form-inline">
				<input type="date" id="birthday"/>
				<button class="btn btn-primary" onclick="getAge();">Hitung</button>
				<h2>Umur Anda adalah: <span id="result" class="text-primary"></span></h2>
			</div>
		</div>
	</div>

Fungsi Javascript

Sedangkan script dibawah ini adalah fungsi javascript yang dibuaat untuk mengetahui umur berdasarkan tanggal lahir yang di input oleh user.

function getAge() {
	var date = document.getElementById('birthday').value;
 
	if(date === ""){
		alert("Please complete the required field!");
    }else{
		var today = new Date();
		var birthday = new Date(date);
		var year = 0;
		if (today.getMonth() < birthday.getMonth()) {
			year = 1;
		} else if ((today.getMonth() == birthday.getMonth()) && today.getDate() < birthday.getDate()) {
			year = 1;
		}
		var age = today.getFullYear() - birthday.getFullYear() - year;
 
		if(age < 0){
			age = 0;
		}
		document.getElementById('result').innerHTML = age;
	}
}

Demo | Download

Anda bisa mendownload dan melihat demo dari aplikasi super sedarhana tersebut dengan klik tombol Demo atau Download di atas.

Semoga trik dan script singkat tersebut bermannfaat untuk Anda.

Artikel Lain:

Kunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery Membuat Efek Salju dengan HTML5 Canvas dan Javascript 7 Plugin jQuery untuk Memutar Gambar 360 Derajat Cek Ketersediaan Data Username dengan AJAX jQuery PHP Tutorial Cara Validasi Email dengan AJAX jQuery dan PHP Tutorial Cara Membuat Popup dengan CSS dan Javascript Belajar jQuery untuk Pemula dalam 4 Langkah Mudah Cara Show Hide Password dengan Javascript Membuat tombol scroll ke atas (back to top) dengan jQuery Cara Disable Klik Kanan Pada Gambar di Halaman Web Tutorial Cara Membuat Kalender Dengan PHP, HTML dan CSS