Hallo sahabat dumet ,berjumpa lagi di website tips dan trik dumet school. Dalam pembahasan kali ini saya akan membuat datepicker. datepicker ini adalah suatu plugin yang bisa kalian pergunakan untuk membuat tampilan khususnya tanggal agar terlihat lebih menarik dan mudah digunakan. Banyak sekali desain atau tampilan untuk membuat datepicker. Datepicker ini akan lebih menarik lagi apabila bisa memakai di framework CSS seperti Bootstrap. Nah, kita akan belajar membuat Pilih Tanggal Waktu Menggunakan JQuery dan Bootstrap.

Baiklah kita langsung praktekan saja cara membuat datepicker memakai bootstrap kita pakai template bawaan awalnya saja. Tentunya sebelum membuat datepicker sahabat harus pahami dasar-dasar Bootstrap terlebih dahulu ya. Selanjutnya kalian harus mendownload file plugin datepicker, kalian bisa mendownload filenya https://github.com/xdan/datetimepicker/. Setelah kalian download filenya bisa ekstrak,dan  saya memberikan nama folder datetimepicker sehingga nanti struktur foldernya akan menjadi seperti ini,

extrac file

Sekarang kita lanjutkan untuk membuat tampilan website dasarnya pada folder yang telah kita ekstrak tadi. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.

tanggal-waktu.html

Setelah sudah kalian simpan file tersebut dengan format HTML. Untuk melihat hasilnya kalian bisa membuka file htmlnya pada browser kesayangan kalian. Jika berhasil maka tampilannya akan muncul seperti ini.

tampilan-input

http://kursuswebdesign.org/wp-content/uploads/2019/01/plugin-bootstrap-datetimepicker

diatas script yang dipakai untuk menjalankan datepicker nya.

Sekarang kalian bisa coba mengarahkan mouse dan klik pada textbox tersebut. Sehingga akan muncul popup tanggal dan jam seperti ini.

tampilan-popup

Nah secara defaultnya tanggal serta jam adalah waktu saat ini dan bisa disesuaikan dengan kebutuhan bagaimana sangat mudahkan.

Sekian pembahasan mengenai bagaimana cara membuat Pilih Tanggal Waktu Menggunakan JQuery dan Bootstrap Semoga artikel kali ini bermanfaaat dan berjumpa lagi dengan artikel lainnya.

terima kasih