Bertemu lagi pada edisi bootstrap, kali ini kita akan membahas mengenai cara menggunakan Datepicker dalam form dengan menggunakan bootstrap dan jquery. Datepicker merupakan salah satu komponen yang biasa ada dalam form yang berisi input berupa tanggal atau date.
Datepicker biasanya berupa tombol dropdown interaktif yang akan memudahkan user dalam melakukan pemilihan tanggal dari pada melakukan pengetikan secara manual. Datepicker juga adalah cara yang menampilkan tanggal yang bagus untuk menghindari kesalahan pemilihan hari dan tanggal.
Meskipun bootstrap mempunyai banyak utilitas dan komponen yang membuatnya menjadi salah satu penyedia repositori untuk pembuatan tampilan website yang lengkap tetapi sayangnya secara resmi dalam bundle nya tidak menyertakan fitur datepicker ini.
Datepicker ini banyak digunakan untuk form website yang membutuhkan data tanggal lahir atau hal lain yang berhubungan dengan tanggal. Pada dasarnya HTML (khususnya HTML 5) sudah menyertakan tipe data “date” yang akan memberikan input an berupa date atau tanggal. Tetapi saat kita menggunakan tampilan tipe data “date” ini tampilan akan seperti ini:
<html>
<head>
<title>HTML5 datepicker</title>
</head>
<body>
<form action="#">
<label for="Tanggal">Tanggal:</label>
<input type="date" id="Tanggal" name="Tanggal">
<input type="submit" value="Submit">
</form>
</body>
</html>Kalau hanya menggunakan HTML maka tampilannya akan seperti diatas, silahkan teman – teman bandingkan dengan gambar contoh data picker diatas maka hasilnya akan lebih bagus menggunakan bootstrap dan jquery bukan ?. Oleh karena itu pada kesempatan kali ini kita akan membahas cara membuat datepicker dengan jquery dan bootstrap.
Section Artikel
Langkah-Langkah
1. Persiapkan bootstrap
Sebelum memulainya pastikan teman – teman sudah memiliki atau menginstal bootstrap terlebih dahulu ya kalau teman -teman belum mengetahui bagai mana cara memasukkan bootstrap ke dalam halaman website silahkan baca Cara memasukkan bootstrap
atau masukkan script dibawah sebelum tag </head>
<script type="text/javascript" src="https://formden.com/static/cdn/formden.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
Bootstrap disini kita gunakan untuk memperindah form untuk menampilkan datepickernya dengan menggunakan class – class yang telah disediakan oleh bootstrap.
2. Persiapkan jQuery
Selanjutnya kita akan mengggunakan script jQuery yang merupakan library atau pustaka Javascript yang populer untuk menginisiasi datepickernya sciptnya adalah
<script> $(document).ready(function(){ var date_input=$('input[name="date"]'); var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'mm/dd/yyyy', container: container, todayHighlight: true, autoclose: true, }) })</script>
3. Membuat Form datepicker lengkap
Pertama yang perlu kita buat adalah membuat form yang didalamnya terdapat area untuk input data yaitu dengan menggunakan tag <input>. Kemudian memasukkan bootstrap dan jQuery nya, maka program teman – teman akan terlihat seperti :
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Datepicker</title> <!--formden.js akan membuat output data AJAX--> <script type="text/javascript" src="https://formden.com/static/cdn/formden.js"></script> <!-- bootstrap-iso digunakan untuk mengatur tampilan --> <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> <!--Menambahkan libray font awesome karena kita menggunakan ikon untuk tampilannya--> <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" /> <!-- Inline CSS untuk mengatur hal lainnya --> <style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: white !important;} .asteriskField{color: red;}</style> </head> <body> <div class="bootstrap-iso"> <div class="container-fluid"> <h2>Contoh Datepicker</h2> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form action="#" class="form-horizontal" method="post"> <div class="form-group "> <label class="control-label col-sm-2 requiredField" for="date"> Tanggal <span class="asteriskField"> * </span> </label> <div class="col-sm-10"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-calendar"> </i> </div> <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> </div> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input name="_honey" style="display:none" type="text"/> <button class="btn btn-primary " name="submit" type="submit"> Submit </button> </div> </div> </form> </div> </div> </div> </div> <!-- Menambahkan jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Menambahakan Date Range Picker --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> <script> $(document).ready(function(){ var date_input=$('input[name="date"]'); var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'mm/dd/yyyy', container: container, todayHighlight: true, autoclose: true, }) }) </script> </body> </html>
Penjelasan:
- Dalam tag head kita menambahkan libary formden.js untuk mengirim data dalam bentuk data AJAX
- Class untuk element Div yaitu
.container-fluid,.row, dan.col-md-6 .col-sm-6 .col-xs-12adalah bagian dari sistem calss grid Bootstrap yang akan membuat lebar form responsif terhadap lebar berbagai perangkat berbeda. Sedikit penjelasan class.col-md-6berarti membuat kolom dengan besar medium ukuran 6 . - Semua script kode dimasukkan dalam element div dengan class .bootstrap-iso yang akan memberi tahu library bootstrap-iso.css bahwa kita akan menggunakan bootstrap dalam element div tersebut. Teman – teman juga dapat menghilangkan element div ini jika telah memakai bootstrap di website teman sebelumya, ini hanya bersifat optional saja.
- NOTE : Hal yang paling mendasar disini adalah tentang
iddannamepada element<input>,iddannameini akan digunakan sebagai tanda pengenal unik untuk plugin datepicker. - Script javascript terakhir akan digunakan untuk beberapa tujuan seperti menentukan format tanggal, elemen wadah untuk tanggal, memberi tanda pada tanggal hari ini, dan menutup popup tanggal setelah melakukan pemilihan tanggal.
Sekian penjelasan dari saya mengenai datepicker menggunakan bootstrap dan jQuery, kita bisa menambahkan sesuai dengan kebutuhan yang diperlukan. teman – teman bisa membuat range datepicker, show weekdays, today button, autoclear, dan lain sebagainya.
