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