Membuat Date Picker Dengan Bootrap

Membuat Date Picker Dengan Bootrap + Source code

Baik Kali ini zlearn.id akan membagikan tutorial bagaimana caranya membuat date picker dengan Bootraps 3.0.

Apa itu date picker date picker dalam bahasa Indonesia berarti Pengambil tanggal automatis. Fungsinya yaitu untuk mengambil format tanggal dengan lebih mudah dan efisien.
membuat date picker


ya langsung saja ikuti tutorial berikut:


1. Siapkan Folder Bootraps yang berisi datepicker.js dan datepicker.css  jika anda tidak punya di akhir tutorial akan kami bagikan source codenya
 lihat gambar:

www.zlearn.id

www.zlearn.id


2. Kemudian Buat file dengan nama index.html

Ketikan script berikiut:
<!DOCTYPE html>
<html>
<head>
<title>Date Picker By zlearn.id</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/datepicker.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
 
</head>
<body>
 
<center><H1>Membuat DatePicker Dengan Bootstrap</H1></center>
 
<div class="row">
    <div class="col-xs-7 col-xs-offset-3 col-sm-5 col-sm-offset-5 col-lg-5 col-lg-offset-5">
    <div class="form-group" >
        <div class="col-md-6">
           <div class="input-group date " data-date="" data-date-format="yyyy-mm-dd">
               <input class="form-control" type="text" name="tgl_regis" readonly="readonly">
               <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
    </div>
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
 
<center><h3 style="background-color: #86bb6c; color: white;">Tutorial Menarik Lain<a href="https://www.zlearn.id">Zlearn.id</a></h3></center>
 
 
 
 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script>
    $(".input-group.date").datepicker({autoclose: true, todayHighlight: true});
    </script>
</body>
</html>

3.Buka File index.html di browsur dan lihat hasilnya:


Download








Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...