Selamat datang kembali di website asepit yang selalu memberikan informasi - informasi mengenai dunia Teknologi khususnya pada bidang Komputer, Pemograman, dan juga Jaringan. Bagaimana kabar kalian semua, mudah - mudahan dalam keadaan sehat wal afiat dan selalu dilancarkan rezekinya. Pada pembahasan kali ini mengenai cara mendisable beberapa fitur pada datepicker yang dimana terkadang kita diharuskan untuk menggunakan hanya beberapa fitur yang tersedia. Datepicker sendiri merupakan salah satu komponen inputan waktu berupa tanggal dan juga jam, berikut langkah untuk cara penggunaan nya :
1. Kita harus menambahkan style css datepicker yang dibutuhkan, bisa lewat cdn atau juga mendownloadnya terlebih dahulu
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
2. Tambahkan juga .JS datepicker bisa lewat cdn atau juga mendownloadnya terlebih dahulu
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
3. Dan berikut kode kode form yang digunakan
<div class="form-group">
<label for="">Tanggal</label>
<input type="text" class="form-control calendar" id="tgl" placeholder="Masukkan Tanggal" name="tgl" autocomplete="off">
<span class="text-danger">{{ $errors->first('tgl') }}</span>
</div>
4. Tambahkan juga javascript kurang lebih seperti ini
<script type="text/javascript">
$(function(){
// Limit 3 hari
$(".calendar").datepicker({
format: 'dd-mm-yyyy',
startDate: '+0d',
endDate: '+2d',
autoclose: true,
todayHighlight: true
});
// Disable Keyboard
$(".calendar").keydown(function(e){
return false;
});
});
</script>
Mungkin hanya itu untuk pembahasan singkat kali ini mudah - mudahan dapat bermanfaat bagi kita semua, mohon ma'af bila dalam penyampaian terdapat kesalahan dan kekurangannya. Saya ucapkan sekian dan Terima Kasih, jangan lupa kunjungi juga platform lainnya dibawah ini...
Youtube klik disini
Website klik disini
Fans Page klik disini
Comments