Menampilkan datepicker di modal boostrap
Datepicker bootstrap - Kita telah membahas tentang boostrap sebelumnya, nah kali ini kita akan membahas tentang modal boostrap salah satu modul dari boostrap yang menampilkan frame diatas halaman sederhana. dengan modal akan sangat membantu dalam melakukan input data baru di dalam page, kamu tidak perlu membuka (load) page yang lain untuk menginput data.
untuk pertama kita buat document htmlnya dulu disini
<!DOCTYPE html>
<html>
<head>
<title>Boostrap </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.css" >
<script src="js/jquery.min.js"></script>
<style type="text/css">
/** Style untuk membuat modal ada di center screen */
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<center><h1>MENAMPILKAN DATEPICKER DI MODAL<br><small>www.ringkas.us</small></h1><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
tampilkan modal
</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
</div>
<div class="modal-body">
<label>Tanggal</label>
<input type="text" name="tanggal" id="tanggal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" ></script>
</body>
</html>maka akan tampil gambar seperti ini jika button tampilkan modal kita click
ini baru untuk menampilkan modal boostrap saja sedangkan untuk menampilkan silakan kamu download lagi disini , dicontoh akan diberikan jika menggunakan CDN ( kamu butuh koneksi internet jika menggunakan CDN ) … tambahkan kode berikut ini Setelah Bootsrap.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" >
dan file berikut setelah bootsrap.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" ></script>
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
});
</script>maka akan tampil di halaman modal mu
di modal boostrap
secara keseluruhan kodenya akan menjadi seperti ini
<!DOCTYPE html>
<html>
<head>
<title>Boostrap </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" >
<script src="js/jquery.min.js"></script>
<style type="text/css">
/** Style untuk membuat modal ada di center screen */
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<center><h1>MENAMPILKAN DI MODAL<br><small>www.ringkas.us</small></h1><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
tampilkan modal
</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Judul Modal</h4>
</div>
<div class="modal-body">
<label>Tanggal</label>
<input type="text" name="tanggal" id="tanggal" data-provide="datepicker">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" ></script>
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
});
</script>
</body>
</html>jika pun tidak tampil karena berada di belakang modal kamu dapat menambahkan sedikit kode css sebelum tag html </head> yaitu
<style type="text/css">
.datepicker{z-index:1151 !important;}
</style>baiklah sekian dulu tutorial mengenai datepicker di boostrap, semoga bermanfaat
Komentar
Posting Komentar