Cara Membuat Timepicker Sederhana Dengan Javascript

Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada tips dan trik seputar dunia website, pada kesempatan kali ini saya akan share tips tentang Cara Membuat Timepicker Sederhana Dengan Javascript. Dan sebenarnya ini adalah request dari murid dumetschool, yaitu ingin memakai timepicker pada project nya dengan tidak memakai detik dan menit, namun hanya menggunakan per jam nya saja. Dan kebanyakan plugin jQuery, karena tidak ingin menggunakan plugin terlalu banyak pada projectnya maka dari itu saya buat timepicker sederhana dengan javascript. Memang bagus hasilnya jika project ditambahkan plugin jQuery yang akan menambah tampilan lebih menarik, menurut saya jika dalam satu project banyak menggunakan banyak sekali plugin jQuery, website juga pasti akan lemot dan mempengaruhi kinerja website dalam proses reloadnya.

Baik, langsung saja simak Cara Membuat Timepicker Sederhana Dengan Javascript. Siapkan text editornya dan ketikkan script html nya untuk membuat layoutnya, dalam hal ini saya menggunakan bootstrap 4 untuk layoutnya.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript.</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
        <style>
          body {font-family: sans-serif; margin: 10%;}
          li {cursor: pointer}
          ul{padding: 0; margin: 0}
        </style>
</head>
<body>
	<div class="container">
	<div class="row">
		<div class="col-md-2">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Timepicker" id="input" >
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2">
			<ul id="demo">
			</ul>
		</div>
	</div>
	</div>

</body>
</html>

Save dengan nama index.html, selanjutnya kita berikan script javascriptnya untuk membuat timepickernya

var elemen = document.getElementById("demo");
		var jam = ["00:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"];
		for(var i = 0; i <jam.length; i++){
			elemen.innerHTML += "<li class='list-group-item'>" + jam[i] + "</li>";
		}
		var hidden = document.getElementById("demo");
		hidden.style.display = "none";
		var input = document.getElementById("input");
		input.addEventListener("click", myFunction); 
		function myFunction() {
		    hidden.style.display = "block";
		    var li = document.querySelectorAll("#demo li");
		    for(var i = 0; i <li.length; i++){
				li[i].onclick = function(){
					var isi = this.textContent;
					document.getElementById("input").value = isi;
					hidden.style.display = "none";
				}
			}
		}

Jika sudah, save kembali dan jalankan pada browsernya. Maka tampilan seperti gambar di bawah ini

Jika di klik salah satu jamnya, maka akan otomatis form input mempunyai value sesuai jam yang di klik.

Itulah timepicker sederhana dari javascript dari saya, mudah – mudahan bermanfaat. Untuk layoutnya teman – teman bisa di custom lagi supaya tidak terlalu panjang ke bawah list nya, mungkin bisa di buat sama dengan tampilan kalender juga boleh. Dan jika tuhan menghendaki artikel selanjutnya akan saya buat layoutnya, sekian pada artikel kali ini tentang Cara Membuat Timepicker Sederhana Dengan Javascript terimakasih dan sampai jumpa.

Assalamualaikum warahmatullahi wabarakatuh