Datepicker (Flatpickr)
Flatpickr is a lightweight and powerful datetime picker.
Dokumentasi FlatpickrCara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function() {
// INITIALIZATION OF FLATPICKR
// =======================================================
Nue.components.NueFlatpickr.init('.js-flatpickr')
});
</script>
Custom file input
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
DateTime
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y",
"enableTime": true
}'>
<!-- End Flatpickr -->
With value
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates" value="21/06/2019"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
External elements
<!-- Form Group -->
<div class="form-group">
<label for="projectDeadlineFlatpickrNewProjectLabel" class="input-label">Due date</label>
<div id="projectDeadlineNewProjectFlatpickr" class="js-flatpickr flatpickr-custom input-group"
data-nue-flatpickr-options='{
"appendTo": "#projectDeadlineNewProjectFlatpickr",
"dateFormat": "d/m/Y",
"wrap": true
}'>
<div class="input-group-prepend input-group-text" data-bs-toggle>
<i class="bi-calendar-week"></i>
</div>
<input type="text" class="flatpickr-custom-form-control form-control" id="projectDeadlineFlatpickrNewProjectLabel" placeholder="Select dates" data-input value="29/06/2020">
</div>
</div>
<!-- End Form Group -->
Range dates
Use range dates.
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y",
"mode": "range"
}'>
<!-- End Flatpickr -->
Multiple dates
Use multiple mode.
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y",
"mode": "multiple"
}'>
<!-- End Flatpickr -->
Plain Text
Use "inline": true
<!-- Flatpickr -->
<input type="text" class="js-flatpickr d-none" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y",
"inline": true
}'>
<!-- End Flatpickr -->
Disabling dates
Your can write custom javascript function.
<!-- Flatpickr -->
<input type="text" id="js-flatpickr-disabling-dates" class="form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
<script>
Nue.components.NueFlatpickr.init('#js-flatpickr-disabling-dates', {
disable: [
function (date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
]
})
</script>
Modal example
Your can write custom javascript function.
Flatpickr
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open modal
</button>
<!-- End Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Flatpickr</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-nue-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameter | Deskripsi | Nilai default |
|---|---|---|
mode | Pilihan Mode. | single |
dateFormat | Format tanggal. | d M Y |
maxDate | The maximum date that a user can pick to (inclusive). | false |
locale.firstDayOfWeek | Day number. | 1 |
locale.weekdays.shorthand | Singkat nama hari. | ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] |
locale.rangeSeparator | Range separator in the field. | - |
nextArrow | Icon panah Next. | <i class="tio-chevron-right flatpickr-custom-arrow"></i> |
prevArrow | Icoon panah Previous. | <i class="tio-chevron-left flatpickr-custom-arrow"></i> |