Cara Implementasi bootstrap-timepicker di Bootstrap4 Pada Theme Adminator



Bootstrap-timepicker merupakan plugin yang digunakan untuk membantu atau mempermudah penginputan format jam dengan tampilan yang menarik saat penginputannya. Plugin ini menggunakan jQuery dan Bootstrap 3. Lalu bagaimana jika ingin menggunakannya di Bootstrap 4? 

Ikuti langkah-langkah sebagai berikut:

  • Buka file bootstrap-timepicker.min.js
  • Gunakan find and replace agar lebih mudah
  • Ganti glyphicon glyphicon-chevron-up dengan fa fa-angle-up 
  • Ganti glyphicon glyphicon-chevron-down dengan fa fa-angle-down

Untuk membuat tampilannya, kita bisa buat dengan kode berikut pada form:

<div class="input-group mb-3">
 <input class="form-control timepicker" type="text" />
 <div class="input-group-append">
  <span class="input-group-text"><i class="fa fa-clock-o"></i></span>
 </div>
</div>


Lalu untuk script js-nya, masukkan script berikut:

$('.timepicker').timepicker();

Hasilnya:



Jika ingin menghilangkan meridian-nya (AM/PM), tambahkan parameter berikut ke dalam skrip:

$('.timepicker').timepicker({
 showInputs: false,
 showMeridian: false
})

Hasilnya terlihat sebagai berikut:


Semoga bermanfaat