twitter bootstrap akhir-akhir ini mulai digemari untuk membangun sebuah website template, pada perkembangannya saat ini twitter bootstrap telah mencapai versi 3.0.3 dan anda bisa mendapatkannya di official sitenya getbootstrap.com. twitter bootstrap juga menyediakan datepicker dengan menggunakan jquery, dengan begitu akan lebih mudah mempercantik tampilan website kita dengan banyak fitur yang diberikan twitter bootstrap.

akan tetapi tahukah anda bahwa perbedaaan versi pada bootstrap 2 dan bootstrap versi 3 membuat datepicker tidak bekerja?. berikut cara menangani dan tutorial menambahkan datepicker pada bootstrap

untuk masalah kebutuhan, ketika ingin menggunakan datepicker bootstrap anda membutuhkan file berikut :

jquery.js
datepicker.js
bootstrap.css
datepicker.css

jika sudah ready, mari kita lihat kodenya ketika telah disisipkan file-file diatas :

Datepicker author by @Andgaa <!--this css for bootstrap

Date picker for Bootstrap

-->

dengan kode html sederhana diatas anda sudah bisa menampilkan datepicker pada halaman template berbasis bootstrap anda, akan tetapi hal tersebut tidak berlaku pada versi bootstrap yang berbeda. jika anda menggunakan bootstrap 3 maka tutorial tersebut kemungkinan tidak akan berjalan pada bootstrap 2, karena terdapat perubahan class pada css dan javascript pada bootstrap. berikut merupakan cara yang dapat anda ikuti untuk menamplikan bootstrap dari bootstrap versi 2 ke bootstrap versi 3

perubahan bootstrap versi 2 ke versi 3

1. Css

buka file datepicker.css, temukan line 176 -177 seperti berikut :

.input-append.date .add-on i,
.input-prepend.date .add-on i {

lakukan berubahan pada line 176-177 dengan kode sebagai berikut :

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

2. Javascript

buka file datepicker-bootstrap.js, temukan line 34 seperti berikut :

this.component = this.element.is('.date') ? this.element.find('.add-on') : false;

lakukan berubahan pada line 34 dengan kode sebagai berikut :

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

3. Markup

setelah itu, untuk bootstrap versi 2 anda dapat memanggilnya dengan contoh seperti diberikut:

buat fungsi javascript untuk disisipkan di halaman html seperti contoh berikut

kemudian tampilkan datepicker dengan menyisipkan tag input yang diberi id=”datepicker”, dimana ID ini akan mereferensi kefungsi javascript yang sudah kita buat diatas, seperti berikut :

sedangkan, untuk bootstrap versi 3 anda dapat memanggilnya dengan contoh seperti diberikut:

buat fungsi javascript untuk disisipkan di halaman html seperti contoh berikut

kemudian tampilkan datepicker dengan menyisipkan tag div dengan class=”input-group date”, dimana class ini akan mereferensi kefungsi javascript yang sudah kita buat diatas, seperti berikut :

sebagai bahan percobaan, anda dapat mendownload cara menampilkan datapicker pada bootstrap disini

Referensi