Wednesday, November 25, 2015

jQuery - Membuat Bootstrap Datetimepicker

Tags

Dalam pembuatan website pasti kita membutuhkan Datetimepicker untuk misalnya memilih tanggal lahir, memilih tanggal pemesanan, memilih waktu jam masuk dan masih banyak lagi.
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>

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>

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>

- 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>

- 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>

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 !


2 komentar


EmoticonEmoticon