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.
0 komentar