Postingan AneIqbal kali ini akan membahas bagaimana cara menambahkan bootstrap datepicker ke form input HTML dan caranya mudah. Check it out untuk pembahasan selengkapnya.
Dua posting tutorial sebelumnya kita lebih ke sisi belakang atau back-end dari sebuah website. Pertama tentang cara membuat login di PHP dengan nama dan nomor induk mahasiswa. Kedua yaitu cara membuat database di phpmyadmin.
Kali ini, kita akan coba bahas dari sisi depan atau front-end-nya. Lebih spesifiknya, kita akan coba menambahkan Bootstrap Datepicker ke form input.
Bootstrap Datepicker
Dari namanya sudah ketahuan, -datepicker- yakni untuk mengambil tanggal. Jadi, saat ada form input, dan kita klik inputan tersebut, maka kursor ketikan akan muncul. Saat itulah datepicker juga akan muncul dan kita bisa memilih tanggalnya. Bila diklik, inputan akan terisi tanggal secara otomatis.
Menurut halaman official Bootstrap Datepicker, ada dua syarat yang harus dipenuhi agar Bootstrap Datepicker dapat berjalan. Apa saja syarat tersebut? Satu, jQuery versi 1.7 ke atas. Dua, Bootstrap versi 2 ke atas.
Kalau di source code projek Anda sudah ada dua persyaratan di atas atau bahkan lebih tinggi versinya, maka Anda hanya tinggal menambahkan Bootstrap Datepicker saja. Kalau belum ada, ya sudah pasti harus ditambahkan.
Anda bisa menggunakannya dengan dua cara yakni via CDN dan GitHub. Cara via CDN atau Content Delivery Network adalah dengan memanggil file via internet. Jadi cukup arahkan saja value atau nilai dari atribut href pada CSS dan atribut src pada Javascript ke link CDN-nya.
Kalau via GitHub, Anda perlu mendownload terlebih dahulu filenya. Lalu sertakan filenya ke dalam source code projek Anda. Terakhir, panggil filenya sesuai dimana Anda meletakannya.
Sekarang, kita langsung tengok codingannya.
<!DOCTYPE html>
<html>
<head>
<title>Menambahkan Bootstrap Datepicker - AneIqbal</title>
<!-- CSS Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<!-- CSS Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Javascript Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js">
</script>
<!-- Javascript Bootstrap Datepicker -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js">
</script>
</head>
<body>
<label>Tanggal Lahir</label>
<input type="text" class="datepicker">
<script type="text/javascript">
$('.datepicker').datepicker();
</script>
</body>
</html>
Seperti yang terlihat di atas, saya menggunakan cara CDN. Semua diarahkan ke file “hidup” atau online. Ini supaya lebih cepat saja dalam pembuatan tutorial ini dan kurang cocok untuk diterapkan dalam production. Sebab, ada ketergantungan di sini. Bagaimana kalau penyedia CDN ini ada masalah seperti servernya mati dan sebagainya? Misalnya.
Urutan pemanggilannya harus diperhatikan. Pertama, panggil CSS Bootstrap terlebih dahulu baru kemudian Bootstrap Datepickernya. Karena Bootstrap Datepicker punya ketergantungan terhadap Bootstrap. Setelah itu, panggil jQuery. Kemudian Javascript Bootstrap dan terakhir Javascript Bootstrap Datepicker.
Setelah kita panggil file requirementsnya, selanjutnya adalah menjalankan fungsinya. Fungsinya ini harus ditargetkan ke elemen. Cara penargetannya adalah dengan menggunakan value dari atribut class: $(‘.namaclass’).datepicker();.
Seperti contoh di atas, saya menambahkan atribut class dan memberinya value datepicker pada elemen form input. Value bisa disesuaikan dengan keinginan bro-bro sekalian. Lalu beri value class tersebut pada fungsi datepicker.
Catatan: Cara penargetannya bisa dengan class maupun id. Penggunaan class dimaksudkan untuk penggunaan yang berulang-ulang atau ada lebih dari satu form input datepicker dan berformat sama, misalnya: dd/mm/yyyy. Jadi cukup sekali pemanggilan fungsi. Penggunaan id dimaksudkan untuk penggunaan yang spesifik atau berbeda-beda formatnya. Fungsi dipanggil berkali-kali dan formatnya disesuaikan.
Kemudian save file dengan ekstensi .html. Misalnya, bootstrap-datepicker.html. Lalu jalankan file tersebut dan ini hasilnya.
Kalau kita klik salah satu tanggalnya, akan seperti tampilannya.
Sampai sini selesai pembahasannya. Tidak sulit bukan untuk memasangnya? Silakan dicoba praktikkan sendiri apakah berhasil muncul atau tidak datepickernya.
Demikian panduan kali ini tentang memasang bootstrap datepicker pada form input HTML. Terima kasih sudah membaca sampai akhir.
