Kembali lagi dengan saya di tips dan trik Dumet School, pada kesempatan kali ini kita akan belajar tentang Cara Menggunakan Plugin jQuery Timepicker. Dimana timepicker ini berfungsi untuk menampilkan tanggal dan waktu, nah pada studi case kali ini selain saya mengenalkan plugin jQuery saya juga akan mencoba membuat sebuat layout jadwal. Contoh jadwal booking tempat tentunya ada jam masuk dan pulang
Lalu kita bisa isi waktu dan tanggalnya
Dengan menggunakan plugin ini tampilan yang kita buat lebih atraktif dan cepat dalam membuatnya hanya tinggal pakai saja, baik sekarang kita akan mulai praktekkan Cara Menggunakan Plugin jQuery Timepicker sebelum kita mulai teman – teman download terlebih dahulu plugin jQuery nya, bisa klik link ini untuk download.
Jika sudah, extract file di dalam 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 pada browser nya maka hasilnya seperti gambar di bawah ini
Selanjutnya kita panggil plugin yang tadi teman – teman download
<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 dalam 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
Jika sudah, baru kita berikan fungsi 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 pada browsernya
Maka tag input sudah berhasil kita berikan plugin Timepicker
Bagaimana, sangat mudah bukan..??
Dan hasilnya cukup bagus untuk layout nya, oke mungkin cukup sekian pada artikel kali ini tentang Cara Menggunakan Plugin jQuery Timepicker kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat.
Terimakasih dan Sampai Jumpa
The post Cara Menggunakan Plugin jQuery Timepicker appeared first on Kursus Website Terbaik.