Input Tanggal Dengan Bootstrap Datepicker

Bootstrap datepicker ialah sebuah JavaScript yang bisa mempersembahkan antar muka berupa tanggal kepada pengguna ketika mengisi data pada form input yang dideklarasikan khusus untuk memasukan data tanggal. Dulu ketika masih primitif Saya memasukan tanggal secara manual, namun bila memakai date picker, kita spesialuntuk cukup klik – klik saja interface kalender yang ditampilkan date picker bootstrap. Sebenarnya banyak jenis date picker untuk input tanggal, namun bila framework/gaya yang kita gunakan yakni bootstrap maka mungkin untuk input tanggalnya lebih cocok juga memakai bootstrap date picker, alasanya sederhana yaitu semoga seragam saja.

Lihat juga : Mengatur Format Tanggal Datepicker jQuery UI 

Penggunaan Bootstrap Date Picker pada sebuah input data tanggal sangatlah sederhana, kita tinggal file css dan Javascript untuk Bootstrap Date Picker, kemudian membuat fungsi untuk mengaktifkan tanggal, maksudnya membuat fungsi untuk mengaktifkan tanggal yaitu misal ketika user taru kursornya pada input tanggal bootstrap date picker akan tampil. contohnya menyerupai diberikut

misal tampilan bootstrap-datepicker. Saat input tanggal di klik, maka akan muncul tampilan kalender

Bootstrap Datepicker ini membutuhkan Javascript atau Jquery, nah bila Anda memakai Bootstrap maka tentunya sudah ada paket Jquery didalamnya, jadi spesialuntuk perlu memanggilnya. 

Input Tanggal melaluiataubersamaini Bootstrap datepicker bisa memakai cara – cara diberikut :

1. Download terlebih lampau Bootstrap Date Picker, kemudian taruh di folder server projek website Anda
2. Panggil file CSS bootstrap dan Bootstrap date picker, taruh diatas isyarat </head>
   
   

   <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="../vendor/datepicker/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">

3. Buat input script input untuk tanggal kemudian menambahkan pada CLASS ‘tanggal’ pada inputnya.
   misal
   

   <div class="form-group"> <label>Tanggal Lahir :</label> <input type="text" name="tanggal_lahir" id="tanggal_lahir" class="tanggal form-control" required="" placeholder="Tanggal Lahir" /> </div>

4. Panggil file Jquery Bootstrap dan Bootstrap datepicker, taruh dibagian atas </body>
   

   <!-- jQuery -->     <script src="../vendor/jquery/jquery.min.js"></script>  <!--Date Picke -->  <script src="../vendor/datepicker/js/bootstrap-datepicker.js"></script>

5. Supaya pada ketika kursor diarahkan ke input tanggal muncul kalender date picker, maka buatlah fungsi untuk memanggil class tanggal yang sudah ditaruh pada input. Tambahkan JavaScript diberikut diatas tag </body>
   

    <!-- Date Picker -->    <script type="text/javascript">             $(document).ready(function () {                 $('.tanggal').datepicker({                     format: "yyyy-mm-dd",                     autoclose:true                 });             });         </script>

Format tanggal diatas dibentuk yyyy-mm-dd mengikuti format yang berlaku pada database, alasannya yakni database secara default database untuk tanggal akan disimpan dengan format menyerupai itu, Anda bisa saja merubah inputnya sesuai dengan format tanggal indonesia dd-mm-yyyy, spesialuntuk saja nanti ketika input di proses, maka script PHP perlu merubahnya terebih lampau menjadi format tanggal yang sesuai dengan database yaitu yyyy-mm-dd, bila tidak maka data tanggal tidak akan tersimpan ke database, oleh alasannya yakni itu pada date picker diatas mungkin lebih baik kalau format tanggalnya diubahsuaikan saja dengan format tanggal database.

Teknik input memakai boostrap date picker ini pernah Saya terapkan pada Aplikasi PPDB Sekolah Sepak Bola,  silahkan Anda tinggal mendownloadnya saja, supaya bisa memahami secara lebih terang lagi.   

Share :