Blog
Cara Memasang DatePicker (Kalender) Bootstrap Pada Input Field Form
jQuery 3 minggu 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://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456
"Client-facing" person. His goal - help clients/projects succeed and always coding.
Lihat Project Kami | Bertemu Tim Kami
Tertarik berkerja dengan kami? Email disini:
wisnu@tipa.co.id