Diperbarui tanggal 13/06/2023

Membuat Datepicker untuk Bootstrap

kategori PHP / tanggal diterbitkan 26 Juni 2016 / dikunjungi: 11rb kali

Datepicker merupakan sebuah popup yang menampilkan kalender yang berfungsi untuk mempermudahkan pengguna dalam menginputkan tanggal kedalam suatu from inputan text. Banyak plugin yang dapat digunakan untuk membaut datepicker, namun kali ini kita akan membahas penggunaan datepicker pada framework CSS bootstrap. Pada intinya jika sebuah textbox terseleksi, maka aka ditampilkan pop-up kalender yang dapat diklik oleh pengguna untuk memasukkan format tanggal kedalam suatu textbox seperti pada gambar berikut:

Disini saya menggangap bahwa Anda sudah mengetahui cara penggunaan bootstrap. Langkah pertama yang harus dilakukan yaitu mendownload jQuery dan bootstrap terlebih dahulu. Anda dapat mendownload jQuery disini dan bootstrap Disini ataupun Anda dapat mendownload fullscrip yang saya sertakan diakhir artikel ini.

Baiklah langsung saja berikut adalah script lengkap penggunaan datepicker pada bootstrap 3.

<!doctype html><html><head><title>Datepicker bootstrap</title><link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><link type="text/css"  href="bootstrap-datepicker/css/bootstrap-datepicker.css"  rel="stylesheet"></head><body><div class="container-fluid">	<div class="row">		<div class="col-md-12">        <h4>Bootstrap Datepicker</h4>        	Date <input type="text" id="tanggal" name="tanggal">		</div>	</div></div><script src="jquery/jquery-2.2.1.js"></script><script src="bootstrap/js/bootstrap.js"></script><script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script><script>$('#tanggal').datepicker({		format: 'yyyy-mm-dd',		daysOfWeekDisabled: "0",		autoclose:true    });</script></body></html>