ribbon iwa

Cara Menggunakan Time Picker Pada Bootstrap

Selamat pagi bagaimana kabar anda, kali ini kami akan share tutorial yang sangat simple, tetapi kami harap apa yang kami share ini bermanfaat bagi anda. Lnagsung saja mari kita mulai.



Sesuai dengan yang kami katakan disini kita menggunakan bootstrap dan Time Picker oleh karena itu kalian tinggal menambahkan elemen yang ingin kalian tambahkan.

Let's star kalian harus memasukan library CSS dan dan JS kedalam form atau aplikasi yang ingin dibuat.

CSS
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/timepicker.css"> 

JS
<script src="assets/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="assets/timepicker.js"></script> 

Form Input
Disini kalian harus membuat form input dimana Time Picker nantinya akan muncul.
 <div class="bootstrap-timepicker">
       <div class="form-group">
         <label>Time picker:</label>
 
                <div class="input-group input-group-lg">
                <input type="text" class="form-control timepicker">
 
                <div class="input-group-addon">
                       <span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
        </div>
</div> 

JQuery
Masukkan code dibawah ini tepat di atas head, code ini mempunyai fungsi untuk menginialisasi waktu (bahasanya terlalu tinggi).
 $(function(){
 $('.timepicker').timepicker({
       showInputs: false
    })
}); 

Full HTML
Code berikut merupakan gabungan dan implementasi dari semua code di atas.
 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Time Picker</title>
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="assets/timepicker.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Example TimePicker</a></li>
    </ul>
   </div>
  </div>
 </nav>
<div class="container">
 <br/>
 <div class="row">
  <div class="col-sm-4 col-sm-offset-4">
   <div class="bootstrap-timepicker">
                <div class="form-group">
                 <label>Time picker:</label>

                   <div class="input-group input-group-lg">
                     <input type="text" class="form-control timepicker">

                     <div class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                     </div>
                   </div>
                </div>
            </div>
  </div>
 </div>
</div>

<script src="assets/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="assets/timepicker.js"></script>
<script>
$(function(){
 $('.timepicker').timepicker({
       showInputs: false
    })
});
</script>
</body>
</html> 

Kalian bisa melihat dan mencobanya langsung dengan menekan button demo dibawah, kalian juga bisa mendownload source lengkapnya dibawah ini.

DEMO      DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, Lain kali kami akan mencobanya untuk terhubung langsung dengan database.


SUBSCRIBE TO OUR NEWSLETTER

close