Disini kita akan coba cara membuat atau memasang Bootstrap Datetimepicker di website kita.
Instalasi
1. Copy kode css di dalam tag <head>....</head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>
2. Copy kode javascript tepat di atas tag </body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
format: 'DD MMMM YYYY HH:mm',
});
$('#datepicker').datetimepicker({
format: 'DD MMMM YYYY',
});
$('#timepicker').datetimepicker({
format: 'HH:mm'
});
});
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
format: 'DD MMMM YYYY HH:mm',
});
$('#datepicker').datetimepicker({
format: 'DD MMMM YYYY',
});
$('#timepicker').datetimepicker({
format: 'HH:mm'
});
});
</script>
3. Copy kode html tepat di bawah tag <body>
- Untuk Datetimepicker
<label>Date Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
- Untuk Datepicker
<label>Date Picker:</label>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
- Untuk Timepicker
<label>Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='timepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='timepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
4. Kode setelah di gabungkan.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Datetimepicker</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div>
<div style="padding-top: 25px;">
<center><h1>jQuery Datetimepicker</h1></center>
</div>
<br />
<div class="row">
<div class='col-sm-4'>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
<label>Date Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Date Picker:</label>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<label>Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='timepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- DATETIMEPICKER -->
<div class='col-sm-4'>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
format: 'DD MMMM YYYY HH:mm',
});
$('#datepicker').datetimepicker({
format: 'DD MMMM YYYY',
});
$('#timepicker').datetimepicker({
format: 'HH:mm'
});
});
</script>
</body>
</html>
5. Hasil
Terima kasih
Enjoy your day !
3 komentar
nice job vro !!
Thanxx
halo mas,
untuk masukin nilai dari datetimepickernya gimana ya?klau type nya itu timesmap di databases
EmoticonEmoticon