Cara Menggunakan Bootstrap Datepicker 3 di Codeigniter

Kali ini saya akan sedikit membagikan ilmu bagaimana menggunakan datepicker bootstrap 3 pada codeigniter, codeigniter yang saya pakai disini adalah versi 2.2.1. kalo begitu langsung saja siapkan codeigniter yang pakai.

Disini saya menamakan folder projectnya dengan datepicker_ci lalu simpan di folder htdocs kalian.

Pertama kita siapkan terlebih dahulu pengaturan codeigniternya, apa saja yang dibutuhkan untuk membuat datepicker ini berjalan di codeigniter.


Buka file php autoload di folder config, lalu ubah settingannya seperti gambar dibawah.















Pada pengaturan diatas kita hanya menambahkan urlpada helper, karena kita tidak menggunakan database jadi tidak usah menload apa-apa pada library.

Selanjutnya buka file php routes di folder config, lalu ubah settingannya seperti gambar dibawah.














Ubah default controllernya yang tadinya welcome menjadi datepicker, karena controller datepicker ini yang akan kita gunakan menjadi default indexnya.

Setelah itu kita siapkan file bootstrap datepickernya dan simpan di direktori kalian, contoh disini saya membuat folder assetspada struktur folder codeigniternya. Lalu simpan file datepickernya didalam folder tersebut.
























Lalu setelah itu buat file php untuk controller codeigniternya lalu berinama datepicker dan simpan di folder controller codeigniternya, dan isikan script dibawah ini.

Controller : datepicker.php

<?php if(!defined('BASEPATH')) exit ('no direct script access allowed');


class Datepicker extends CI_Controller {



public function index() {


$this->load->view('view_datepicker');

/*fungsi memanggil view datepicker atau tampilan
yang akan dipakai*/

}


}


?>

Selanjutnya kita buat file php untuk viewnya, berinama view_datepicker lalu masukan script pada gambar dibawah, dan sekalian kita include file bootstrap yang akan kita gunakan. Lalu simpan di folder views di codeigniternya.

View : view_datepicker.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Datepicker di Codeigniter</title>
</head>

<!-- file bootstrap css yang digunakan-->

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

<link href="<?php echo base_url()?>assets/date_picker_bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">


<body>

<form name="form1" action="" method="post" enctype="multipart/form-data">

<div class="form-group" style="margin-left:10px;">
<label>Datepicker</label>
<div class="date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control datepicker" data-date-format="yyyy-mm-dd" type="text" name="tanggal" style="width:150px" >
</div>
<input type="hidden" id="dtp_input2" value=""/>
</div>

</form>

</body>

<!-- jQuery Version 1.11.0 -->
<script src="<?php echo base_url() ?>assets/jquery-1.11.0.js"></script>


<!--file include Bootstrap js dan datepickerbootstrap.js-->

<script src="<?php echo base_url(); ?>assets/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo base_url()?>assets/date_picker_bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/date_picker_bootstrap/js/locales/bootstrap-datetimepicker.id.js"charset="UTF-8"></script>

<!-- Fungsi datepickier yang digunakan -->
<script type="text/javascript">
$('.datepicker').datetimepicker({
language: 'id',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
</script>

</html>

Jika sudah memasukan semua script yang ada pada diatas, sekarang kita coba cek dibrowser dengan membuka project yang kita buat ini.

Buka url localhost/datepicker_ci maka tampilan datepicker yang kita buat tadi akan seperti gambar dibawah.





















Dan selesailah pembahasan kita kali ini, jika kalian mengikuti semua langkah diatas dengan benar maka hasilnya pasti seperti gambar diatas, Terimakasih telah berkunjung pada blog saya semog ilmu yang kita bahas kali ini bermanfaat, jika ada yang kurang paham dan ingin ditanyakan silahkan untuk menanyakannya di kolom komentar.

Dan untuk memberikan kemudahan kepada kalian yang mencobanya, dibawah ini sudah saya siapkan source code project yang kita bahas kali ini, yang bisa kalian download.



7 thoughts on “Cara Menggunakan Bootstrap Datepicker 3 di Codeigniter

  1. mas ada contoh program menghitung umur di codeigniter nggak,
    dimana nanti harus menginputkan tanggal lahir tetapi yang muncul d view adalah umurnya bukan tgl lahirnya,, bisa bantu nggak mas?? soalnya saya cari2 ngak ketemu2
    trimakasih

Leave a Reply

Your email address will not be published. Required fields are marked *