Senin, 03 Oktober 2016

Bootstrap Datepicker

Pada kesempatan kali ini, saya akan menshare bagaimana membuat datepicker menggunakan bootstrap, download dulu file yang dibutuhkan https://eonasdan.github.io/bootstrap-datetimepicker/ jika sudah simpan diserver lokal yang anda gunakan.
Kemudian coba ketikan kode program dibawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>DatePicker</title>
 <link rel="stylesheet" href="<?php  echo base_url();?>asset/bootstrap/css/bootstrap.min.css">
 <!--Datepicker CSS-->
 <link rel="stylesheet" href="<?php  echo base_url();?>asset/datepicker/css/bootstrap-datepicker3.css">
 <link rel="stylesheet" href="<?php  echo base_url();?>asset/dist/css/AdminLTE.min.css">
</head>
<body>
<div class="container">
 <div class="col-sm-3">
 <h4>Datepicker</h4>
  <input id="tanggal" type="text" class="form-control">
 </div>
</div>
<!-- jQuery 2.2.3 -->
<script src="<?php  echo base_url();?>asset/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<?php  echo base_url();?>asset/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php  echo base_url();?>asset/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
            $(document).ready(function () {
                $('#tanggal').datepicker({
                    format: "dd-mm-yyyy",
                    daysOfWeekHighlighted: "5",
                    autoclose: true


                });
            });
        </script>
</body>
</html>

Jika sudah dan tidak ada error, hasil akhirnya akan seperti gambar dibawah.