Tutorial Bootstrap: Cara Menambahkan Bootstrap Datepicker ke Form Input - AneIqbal

Post Top Ad

Tutorial Bootstrap: Cara Menambahkan Bootstrap Datepicker ke Form Input

Share This
Halo bro. Dua posting tutorial sebelumnya kita lebih ke sisi belakang atau back-end dari sebuah website. Pertama tentang cara membuat sistem login dengan nama dan nomor induk mahasiswa. Kedua yaitu cara membuat database kampus dan table mahasiswa lewat 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.

cara menambahkan bootstrap datepicker ke form input

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.

cara menambahkan bootstrap datepicker ke form input

Menurut halaman official Bootstrap Datepicker, ada dua syarat yang harus dipenuhi agar Bootstrap Datepicker dapat berjalan. Apa saja syarat tersebut?
  1. jQuery versi 1.7 ke atas
  2. 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.

Link jQuery & Bootstrap
- Download jQuery
- Download Bootstrap 3

.. dan berikut adalah link untuk Bootstrap Datepicker.
- Bootstrap Datepicker via CDN
- Bootstrap Datepicker via GitHub

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 inputValue bisa disesuaikan dengan keinginan bro-bro sekalian. Lalu beri value class tersebut pada fungsi datepicker.

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.

Jangan lewatkan!
Manakah yang Benar? Standarisasi atau Standardisasi? Simak Jawabannya Di Sini!
Cara Menampilkan Animasi Jam Server dengan PHP dan Javascript
42 Tutorial HTML Lengkap dengan Penjelasannya

Kemudian save file dengan ekstensi .html. Misalnya, bootstrap-datepicker.html. Lalu jalankan file tersebut dan ini hasilnya.

cara menambahkan bootstrap datepicker ke form input

Kalau kita klik salah satu tanggalnya, akan seperti tampilannya.

cara menambahkan bootstrap datepicker ke form input



Tidak ada komentar:

Posting Komentar

Silakan berkomentar dengan kalimat yang bijak.

Post Bottom Ad