Datepicker (Flatpickr)
Flatpickr is a lightweight and powerful datetime picker.
Flatpickr documentationHow to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/flatpickr/dist/flatpickr.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/js/hs.flatpickr.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF FLATPICKR
// =======================================================
HSCore.components.HSFlatpickr.init('.js-flatpickr')
})();
</script>
Custom file input
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-hs-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
DateTime
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
data-hs-flatpickr-options='{
"dateFormat": "d/m/Y",
"enableTime": true
}'>
<!-- End Flatpickr -->
With value
Use value attribute.
<!-- Flatpickr -->
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates" value="21/06/2019"
data-hs-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-hs-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-hs-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-hs-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-hs-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-hs-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
<!-- End Flatpickr -->
<script>
HSCore.components.HSFlatpickr.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-hs-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
| Parameters | Description | Default value |
|---|---|---|
mode |
Mode of flatpickr. | single |
dateFormat |
Date format. | d M Y |
maxDate |
The maximum date that a user can pick to (inclusive). | false |
locale.firstDayOfWeek |
Day number. | 1 |
locale.weekdays.shorthand |
Short day names. | ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] |
locale.weekdays.longhand: [], |
Longhand names. | [] |
locale.rangeSeparator |
Range separator in the field. | - |
nextArrow |
Next arrow template. | <i class="tio-chevron-right flatpickr-custom-arrow"></i> |
prevArrow |
Previous arrow template. | <i class="tio-chevron-left flatpickr-custom-arrow"></i> |