Contoh Penggunaan Bootstrap Datepicker

Tujuan

Ingin menampilkan datepicker pada inputan tanggal menggunakan Bootstrap Datepicker.

Solusi

Download versi terbaru disini.

Untuk CodeIgniter

Simpan di folder assets. Beri nama foldernya bebas, disini saya kasih nama foldernya bootstrap-datepicker.

Include CSS nya setelah Bootstrap, persyaratan minimum nya yaitu Bootstrap versi 2.0.4+.

<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url('assets/bootstrap-datepicker/css/bootstrap-datepicker.min.css'); ?>">

Include JS nya setelah jQuery, persyaratan minimum nya yaitu jQuery versi 1.7.1+.

Tambahkan juga script JS untuk inisialisasi class datepicker nya.

<script src="<?php echo base_url('assets/js/jQuery-2.1.4.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js'); ?>"></script>

<script>
$(document).ready(function() {
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true,
    });
});
</script>

Untuk di HTML nya:

<input name="tanggal" id="tanggal" class="form-control datepicker" type="text">

Untuk PHP Native dan Laravel sebetulnya tidak jauh berbeda, tinggal disesuaikan saja.

Video Tutorial

Leave a Reply