| apa itu bootstrap?? Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.... Setelah sebelumnya saya share tutorial mengenai Cara Mudah Membuat Form Datepicker dengan Bootstrap 3, Pada tutorial ini kita masih membahas soal datepicker tapi kita akan menggunakan Bootstrap 4. Karena librari Datepicker pada tutorial Bootstrap 3 itu hanya bisa di pakai pada Bootstrap 2 dan Bootstrap 3 saja. Sama seperti tutorial sebelumnya, kita akan bahas cara buat inputan Tanggal (Datepicker), Periode Tanggal (DateRangePicker), Bulan (MonthPicker), Tahun (YearPicker) dan Periode Tahun (YearRangePicker). Mungkin Anda penasaran seperti apa sih DatePicker, DateRangePicker, MonthPicker, YearPicker, YearRangePicker ini? gambar dibawah ini mungkin bisa memperjelas seperti apa bentuk form inputan yang akan kita buat sekarang.  DEMO STEP 1 – PERSIAPAN
Cukup banyak librari yang dipakai ya? yup karena disini kita menggunakan Tempus Dominus Bootstrap Datepicker sehingga memang memerlukan librari lainnya yakni jQuery, Moment JS, Font Awesome 5 dan tentunya Bootstrap 4 nya. STEP 2 – JAVASCRIPT function setDatePicker(input){
$(input).datetimepicker({
format: "YYYY-MM-DD",
useCurrent: false
})
}
function setDateRangePicker(input1, input2){
$(input1).datetimepicker({
format: "YYYY-MM-DD",
useCurrent: false
})
$(input1).on("change.datetimepicker", function (e) {
$(input2).val("")
$(input2).datetimepicker('minDate', e.date);
})
$(input2).datetimepicker({
format: "YYYY-MM-DD",
useCurrent: false
})
}
function setMonthPicker(input){
$(input).datetimepicker({
format: "MM",
useCurrent: false,
viewMode: "months"
})
}
function setYearPicker(input){
$(input).datetimepicker({
format: "YYYY",
useCurrent: false,
viewMode: "years"
})
}
function setYearRangePicker(input1, input2){
$(input1).datetimepicker({
format: "YYYY",
useCurrent: false,
viewMode: "years"
})
$(input1).on("change.datetimepicker", function (e) {
$(input2).val("")
$(input2).datetimepicker('minDate', e.date);
})
$(input2).datetimepicker({
format: "YYYY",
useCurrent: false,
viewMode: "years"
})
}
Terlihat dari kode diatas kita membuat 5 fungsi yakni :
Pada kode ini kita menggunakan beberapa option dari librari Bootstrap Datepicker antara lain :
Untuk lebih jelasnya mengenai option-option yang bisa kita gunakan dari librari Tempus Dominus Bootstrap Datepicker ini, silahkan klik disini untuk melihat dokumentasinya langsung atau klik link dokumentasi pada bagian Sumber & Referensi dalam tutorial ini (Ada dipaling bawah tutorial ini). Baca Juga:
STEP 2 – VIEW <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap DatePicker</title>
<!-- Include file bootstrap.min.css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Include library Font Awesome -->
<link href="libraries/fontawesome/css/all.min.css" rel="stylesheet">
<!-- Include library Datepicker Gijgo -->
<link href="libraries/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet">
</head>
<body>
<div style="padding: 10px 30px;">
<h1>DatePicker for Bootstrap 4</h1>
<hr />
<div class="row">
<div class="col-2">
<div class="form-group">
<label>Tanggal (DatePicker)</label>
<input type="text" id="datepicker" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#datepicker" autocomplete="off" />
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Periode Tanggal (DateRangePicker)</label>
<div class="input-group">
<input type="text" id="startdate" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#startdate" autocomplete="off" />
<div class="input-group-append">
<span class="input-group-text">s/d</span>
</div>
<input type="text" id="enddate" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#enddate" autocomplete="off" />
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<label>Bulan (MonthPicker)</label>
<input type="text" id="monthpicker" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#monthpicker" autocomplete="off" />
</div>
</div>
<div class="col-2">
<div class="form-group">
<label>Tahun (YearPicker)</label>
<input type="text" id="yearpicker" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#yearpicker" autocomplete="off" />
</div>
</div>
<div class="col-3">
<div class="form-group">
<label>Periode Tahun (YearRangePicker)</label>
<div class="input-group">
<input type="text" id="startyear" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#startyear" autocomplete="off" />
<div class="input-group-append">
<span class="input-group-text">s/d</span>
</div>
<input type="text" id="endyear" class="form-control datetimepicker-input" data-toggle="datetimepicker" data-target="#endyear" autocomplete="off" />
</div>
</div>
</div>
</div>
</div>
<!-- Include file jquery.min.js -->
<script src="js/jquery.min.js"></script>
<!-- Include file boootstrap.min.js -->
<script src="js/bootstrap.min.js"></script>
<!-- Include library Moment JS -->
<script src="libraries/moment/moment.min.js"></script>
<!-- Include library Datepicker Gijgo -->
<script src="libraries/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Include file custom.js -->
<script src="js/custom.js"></script>
<script>
$(document).ready(function(){
setDatePicker("#datepicker")
setDateRangePicker("#startdate", "#enddate")
setMonthPicker("#monthpicker")
setYearPicker("#yearpicker")
setYearRangePicker("#startyear", "#endyear")
})
</script>
</body>
</html>
Ada 2 hal yang harus di perhatikan, karena disini kita menggunakan librari Tempus Dominus Bootstrap Datepicker, maka wajib menset atirbut class input nya dengan datetimepicker-input dan set atribut data-toggle dengan datetimepicker. Saya akan coba jelaskan cara menggunakan 5 fungsi yang telah kita buat pada step sebelumnya (file custom.js).
Sekian untuk tutorial kali ini. Jika ada hal yang ingin ditanyakan, langsung tanyakan saja lewat kolom komentar dibawah ini. Jangan lupa LIKE dan SHARE nya hehe, Terimakasih. |
Cara menggunakan bootstrap-datepicker
Pos Terkait
Copyright © 2024 kemunculan Inc.
