Blog

Cara Memasang DatePicker (Kalender) Bootstrap Pada Input Field Form

 

Cara Memasang DatePicker (Kalender) Bootstrap Pada Input Field Form

jQuery     11 bulan yang lalu


Saat ingin menampilkan kalender saat field pada form di klik, kita bisa menggunakan Datepicker.

Dalam artikel ini kita akan membuat datepicker menggunakan bootstrap-datepicker.

Library bootstrap-datepicker berjalan diatas jQuery, jadi kita mesti import jQuery sebelum menggunakannya. Dalam studi kasus kita kali ini akan menggunakan CDN sehingga gak perlu susah-susah download library yang kita butuhkan.

Yaudah kita langsung mulai aja, berikut script lengkapnya ya:

// ambil style bootstrap dan datepicker
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha256-siyOpF/pBWUPgIcQi17TLBkjvNgNQArcmwJB8YvkAgg=" crossorigin="anonymous" />

<input type="text" class="form-control datepicker" id="date" name="date" placeholder="Date of everything">

//ambil jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
//ambil bootstrap-datepicker
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>
<script>
  $(function(){
    $(".datepicker").datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true,
    });
  });
</script>

Diatas kita deklarasikan 1 field dengan nama class datepicker, dan di function di javascript kita deklarasikan class dengan nama datepicker akan di eksekusi datepicker dengan tambahan 3 setting (format, autoclose sama todayHightlight). Untuk pengaturan datepicker lebih detail bisa diakses di https://bootstrap-datepicker.readthedocs.io/en/latest/


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://app.klandesa.com. Silahkan gunakan email: [email protected] dan password: 123456


CARI ARTIKEL
Card image cap
AUTHOR: Wisnu

"Client-facing" person. His goal - help clients/projects succeed and always coding.


Lihat Project Kami | Bertemu Tim Kami

Tertarik berkerja dengan kami? Email disini:
[email protected]