Cara Menggunakan Plugin jQuery Timepicker
Kembali lagi dengan saya di tips dan trik Source Code Aplikasi, di kesempatan kali ini kita akan belajar mengenai Cara Menggunakan Plugin jQuery Timepicker. Dimana timepicker ini berfungsi bagi menampilkan tanggal dan waktu, nah di studi case kali ini selain saya mengenalkan plugin jQuery saya pun akan mencoba merancang sebuat layout jadwal. Contoh jadwal booking tempat pastinya ada jam masuk dan pulang
Lalu kita dapat isi waktu dan tanggalnya
Dengan menggunakan plugin ini tampilan yang kita bikin lebih atraktif dan cepat pada membuatnya hanya tinggal gunakan saja, bagus kini kita akan mulai praktekkan Cara Menggunakan Plugin jQuery Timepicker sebelum kita mulai teman – teman unduh terlebih dahulu plugin jQuery nya, dapat klik link ini untuk download.
Sekiranya telah, extract file di pada satu folder. Langkah berikutnya siapkan text editornya dan kita ketikkan script html nya seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Cara Menggunakan Plugin jQuery Timepicker</title>
</head>
<body>
<article>
<div class=demo>
<h2>jQuery Timepicker</h2>
<p id=datepairExample>
<label>Masuk</label>
<input type=text class=date start />
<input type=text class=time start />
<label>Pulang</label>
<input type=text class=time end />
<input type=text class=date end />
</p>
</div>
</article>
</body>
</html>
Kemudian save dengan nama index.html, jalankan di browser nya karenanya hasilnya seperti gambar di bawah ini
Berikutnya kita panggil plugin yang tadi teman – teman unduh
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>
<script type=text/javascript src=jquery.timepicker.js></script>
<link rel=stylesheet type=text/css href=jquery.timepicker.css />
<script type=text/javascript src=bootstrap-datepicker.js></script>
<link rel=stylesheet type=text/css href=bootstrap-datepicker.css />
<script type=text/javascript src=site.js></script>
<link rel=stylesheet type=text/css href=site.css />
Letakkan link di pada tag <head>, lalu berikan link datepair nya
<script src=http://jonthornton.github.io/Datepair.js/dist/datepair.js></script>
<script src=http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js></script>
Letakkan didalam tag <article> atau tepatnya tag tutup class demo
Sekiranya telah, baru kita berikan manfaat jquery nya
<script>
$('#datepairExample .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#datepairExample .date').datepicker({
'format': 'd/m/yyyy',
'autoclose': true
});
$('#datepairExample').datepair();
</script>
save dan refres di browsernya
Karenanya tag input telah berhasil kita berikan plugin Timepicker
Bagaimana, betul-betul gampang bukan..??
Dan hasilnya lumayan bagus bagi layout nya, oke mungkin lumayan demikianlah di artikel kali ini mengenai Cara Menggunakan Plugin jQuery Timepicker kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat.
Terimakasih dan Hingga Jumpa
Sumber https://kursuswebsite.org
