Cara Menggunakan/ Integrasi/ Pasang Datepicker pada Bootstrap
Datepicker yang sederhana dapat Anda dapatkan di https://jqueryui.com/datepicker. Cara integrasi atau memasangnyapun cukup mudah dengan memperhatikan kodingan berikut ini:
Klik menu SEE ORIGINAL untuk lebih jelasnya
Penjelasan
- Kalau Anda perhatikan kodingan diatas, Anda perlu memanggil dulu file-file yang diperlukan, antara lain:
- Jquery
- Jquery UI (js + css)
- Kemudian, setelah kita memanggil file-file tersebut maka kita siapkan form yang akan dibuat menjadi form yang support dengan datepicker dan script js nya.
- Pada baris ke 9-13 merupakan bagian untuk membuat fungsi javascript yang ditujukan ke form datepicker yang kita pilih.
- Pada baris ke 11 ada teks #datepicker yang artinya kita akan memasang datepicker pada form Date yang ada di baris ke-17 dengan id=”datepicker”. Sebagai catatan, kalau Anda ingin mengatur untuk ditampilkan dengan class, maka ganti simbol # menjadi . Jangan lupa juga id=”datepicker” anda ubah menjadi class=”datepicker”.
Bagaimana Kalau Menggunakannya dengan Bootstrap?
- Download dulu filenya di
https://github.com/uxsolutions/bootstrap-datepicker/tree/1.6 atau langsung klik disini. Dokumentasinya bisa Anda lihat disini - Download jquery, klik disini
- Download bootstrap, klik disini
- Ekstrak file yang telah Anda download diatas ke direktori project Anda
- Buatlah kodingan seperti berikut ini:
Klik menu SEE ORIGINAL untuk lebih jelasnya - Jalankan dan lihat hasil yang telah Anda buat atau Anda bisa mendownload hasil jadinya yang versi bootstrap di bagian Download dibawah ini.
Download
Source code: klik disini
Silahkan ajukan pertanyaan di kolom komentar kalau ada yang ingin ditanyakan, jangan lupa dibagikan tulisan ini dan semoga bermanfaat