Timepicker merupakan salah satu teknik untuk menginputkan waktu pada sebuah from input dengan tujuan untuk memudahkan user. Banyak sekali plugin untuk membuat timepicker dengan format dan keunggulannya masing-masing. Pada intinya jika sebuah textbox terseleksi, maka aka ditampilkan pop-up format waktu sehingga membatu sekali bagi pengguna, berikut salah satu format timepicker yang digabungkan dengan bootstrap.
Langkah pertama untuk membuat timepicker bootstrap adalah Anda harus mendownload bootstrap, Jquery dan Datetimepicker bootstrap terlebih dahulu. Anda dapat mendownload melaui tautan berikut Download Bootstrap v3, Download jQuery UI atau Anda dapat mendownload Full sciptnya melalui tautan diakhir artikel ini.
Disini saya menganggap bahwa Anda sudah dapat mengunnakan bootstrap dengan baik.
Berikut adalah script secara keseluruhan penggunaan timepicker bootstrap.
<!doctype html>
<html>
<head>
<title>Datepicker bootstrap</title>
<link type="text/css" href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h4>Bootstrap Timepicker</h4>
Time <input type="text" id="jam" name="jam">
</div>
</div>
</div>
<script src="jquery/jquery-2.2.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script>
$('#jam').datetimepicker({
format: 'hh:ii',
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
</body>
</html>
Untuk mendonwload fullscriptnya Klik disini