August 2, 2017

Cara menggunakan bootstrap datepicker

Share this
  • 3
  •  
  •  
  •  
  •  
  •  
    3
    Shares

Assalamualaikum wr wb, pada kesempatan kali ini saya akan memberikan tulisan mengenai cara menggunakan bootstrap datepicker.  Bootstrap merupakan salah satu framework css yang populer, dimana memiliki pengaturan komponen dan typografi yang cukup lengkap serta mudah untuk digunakan. Tatapi sayangnya, dari banyaknya fitur yang dimiliki bootstrap, komponen datepicker tidak disertakan secara resmi pada bundling dari bootstrap.

Seperti kita ketahui datepicker merupakan salah satu komponen yang penting pada sebuah form yang membutuhkan input sebuah date atau datetime. Misalnya untuk form tgl lahir pada data pegawai atau siswa. Sebenarnya di html sudah menyediakan type untuk inputan berupa date, tetapi pada beberapa browser view yang di tampilan bisa berbeda – beda. Oleh karena itulan plugin datepicker ini dibutuhkan untuk keseragaman tampilan dan kustomisasi yang lebih lengkap.

Cara menggunakan bootstrap datepicker

Proses pemasang bootstrap datepicker cukup mudah, tetapi anda harus sudah menginstall paket bootstrap dan JQuery terlebih dahulu. Untuk komponen bootstrap datepickernya anda bisa mendownloadnya disini, versi datepicker yang saya gunakan adalah 1.6.4. Setelah selesai di download, kemudian pasang pada project anda, berikut adalah contoh lokasi dimana saya menempatkan plugin bootstrap datepicker.

Cara menggunakan bootstrap datepicker

Cara menggunakan bootstrap datepicker

Kemudian panggil komponen css dan javascriptnya pada file index yang anda buat.

Cara menggunakan bootstrap datepicker

Memasang asset css bootstrap datepicker

Cara menggunakan bootstrap datepicker

Memasang assets javascript bootstrap datepicker

Setelah javascript dan css selesai dipasang, kita buat sebuah file yang akan digunakan untuk menampilan form datepicker. Berikut adalah contoh form yang saya buat.

Tambahkan juga javascript untuk menginisialisasi datepickernya.

Pasang dan simpan script diatas, kemudian kita tes hasil dari form datepickernya. Berikut adalah hasil untuk tampilan bootstrap datepicker yang berhasil kita buat.

Cara menggunakan bootstrap datepicker

Cara menggunakan bootstrap datepicker

Bootstrap datepicker juga memiliki banyak option, kita bisa menambahkan sesuai dengan kebutuhan yang diperlukan. Kita bisa membuat range datepicker, show weekdays, today button, autoclear, dsb, inillah yang membuat bootstrap datepicker menjadi plugin yang populer dikarenakan banyak fitur yang bisa di kustomisasi.

Sekian tulisan dari saya, semoga dapat bermanfaat. Terimakasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...