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
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.
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>
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 ;} .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:
.container-fluid, .row, dan .col-md-6 .col-sm-6 .col-xs-12 adalah bagian dari sistem calss grid Bootstrap yang akan membuat lebar form responsif terhadap lebar berbagai perangkat berbeda. Sedikit penjelasan class .col-md-6 berarti membuat kolom dengan besar medium ukuran 6 .id dan name pada element <input>, id dan name ini akan digunakan sebagai tanda pengenal unik untuk plugin datepicker.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.