Cara Membuat Timepicker Sederhana Dengan Javascript
Halo teman – teman, selamat datang kembali di blog tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di tips dan trik seputar dunia blog, di kesempatan kali ini saya akan share tips mengenai Cara Membuat Timepicker Sederhana Dengan Javascript. Dan hakekatnya ini yaitu request dari murid Source Code Aplikasi, yaitu ingin memakai timepicker di project nya dengan tak memakai detik dan menit, namun hanya menggunakan per jam nya saja. Dan kebanyakan plugin jQuery, karena tak ingin menggunakan plugin terlalu banyak di projectnya karenanya dari itu saya bikin timepicker sederhana dengan javascript. Memang bagus hasilnya kalau project ditambahkan plugin jQuery yang akan menambah tampilan lebih menarik, menurut saya kalau pada satu project banyak menggunakan banyak sekali plugin jQuery, blog pun pasti akan lemot dan mempengaruhi performa blog pada proses reloadnya.
Bagus, seketika saja simak Cara Membuat Timepicker Sederhana Dengan Javascript. Siapkan text editornya dan ketikkan script html nya bagi merancang layoutnya, pada hal ini saya menggunakan bootstrap 4 bagi 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, berikutnya kita berikan script javascriptnya bagi merancang timepickernya
var faktor = 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++){
faktor.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;
}
}
}
Jikalau telah, save kembali dan jalankan di browsernya. Karenanya tampilan seperti gambar di bawah ini
Jikalau di klik diantara jamnya, karenanya akan otomatis form input mempunyai value sesuai jam yang di klik.
Seperti itulah timepicker sederhana dari javascript dari saya, gampang – mudahan bermanfaat. Bagi layoutnya teman – teman dapat di kustom lagi supaya tak terlalu panjang ke bawah list nya, mungkin dapat di bikin sama dengan tampilan kalender pun boleh. Dan kalau tuhan menghendaki artikel berikutnya akan saya bikin layoutnya, sekianlah di artikel kali ini mengenai Cara Membuat Timepicker Sederhana Dengan Javascript terimakasih dan hingga jumpa.
Assalamualaikum warahmatullahi wabarakatuh
Sumber https://kursuswebsite.org
