Sabtu, 14 Januari 2017

Membuat Tanggal pada Codeigniter dengan Bootstrap



Mungkin sebagian sudah mengenal tentang Bootstrap, Bootstrap merupakan sebuah framework HTML, JS, CSS yang populer dikalangan web developer dan berlisensi open source, Bootstrap memiliki berbagai plugins yang bisa diterapkan pada web anda, namun disini saya akan membuat tutorial membuat tanggal dengan bootstrap datepicker pada codeigniter dengan sangat mudah. berikut tutorialnya.

Bahan yang dibutuhkan.

        - Boostrap Framework
        - Jquery
        - datepicker-bootstrap 
        - Framework Codeigniter

Download semua bahan yang dibutuhkan, buatlah sebuah folder assets dan ekstrak Bootstrap framework seperti gambar dibawah.



Selanjutnya didalam folder assets buatlah folder plugins/datepicker-bootstrap dan ektrak folder dist pada datepicker-bootstrap.



Selanjutnya buatlah sebuah project CI ada. jika sudah buat satu buah views untuk menampilkan tanggal. lalu ketikan script berikut.
Buat link untuk memanggil CSS
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" type="text/css">        
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datepicker-bootstrap/css/bootstrap-datepicker.min.css" type="text/css">
Buatlah link untuk memanggils JS
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/plugins/datepicker-bootstrap/js/bootstrap-datepicker.min.js"></script>
Ketikan script berikut pada dalam tag <body>

<div class="input-group date" data-provide="datepicker">
      <input type="text" class="form-control">
      <div class="input-group-addon">
          <span class="glyphicon glyphicon-th"></span>
      </div>
</div>

Jika sudah jalankan browser makan akan tampil seperti gambar berikut.

Demo

Semoga bermanfaat
Previous Post
Next Post

3 komentar:

  1. kasih saran dong buat download link nya dmna?

    BalasHapus
  2. cara nyimpan tanggal ke database gimana min ?
    saya udah coba, tapi tanggal yang kesimpan di database jadi 0000-00-00
    mohon pencerahannya

    BalasHapus
    Balasan
    1. Coba ubah type tanggal pada database menjadi varchar..

      Hapus