Date Range Picker
A JavaScript component for choosing date ranges, dates and times.
Date Range Picker documentationHow to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/daterangepicker/daterangepicker.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/daterangepicker/moment.min.js"></script>
<script src="../node_modules/daterangepicker/daterangepicker.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.daterangepicker.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.HSDaterangepicker.init('.js-daterangepicker')
})();
</script>
Basic example
<input type="text" class="js-daterangepicker form-control daterangepicker-custom-input">
Dropup
<input type="text" class="js-daterangepicker form-control daterangepicker-custom-input"
data-hs-daterangepicker-options='{
"drops": "up"
}'>
Auto apply
<input type="text" class="js-daterangepicker form-control daterangepicker-custom-input"
data-hs-daterangepicker-options='{
"autoApply": true
}'>
With time picker
<input type="text" class="js-daterangepicker-times form-control daterangepicker-custom-input"
data-hs-daterangepicker-options='{
"timePicker": true,
"locale": {
"format": "M/DD hh:mm A"
}
}'>
<script>
$(document).on('ready', function () {
HSCore.components.HSDaterangepicker.init('.js-daterangepicker-times', {
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour')
})
});
</script>
Initially empty
<input type="text" class="js-daterangepicker-clear form-control daterangepicker-custom-input" placeholder="Select dates"
data-hs-daterangepicker-options='{
"autoUpdateInput": false,
"locale": {
"cancelLabel": "Clear"
}
}'>
<script>
$(document).on('ready', function () {
HSCore.components.HSDaterangepicker.init('.js-daterangepicker-clear')
$('.js-daterangepicker-clear').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
})
$('.js-daterangepicker-clear').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('')
})
});
</script>
Predefined with Readonly
<button id="js-daterangepicker-predefined" class="btn btn-white">
<i class="bi-calendar-week me-1"></i>
<span class="js-daterangepicker-predefined-preview"></span>
</button>
<script>
$(document).on('ready', function () {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#js-daterangepicker-predefined .js-daterangepicker-predefined-preview').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
HSCore.components.HSDaterangepicker.init('#js-daterangepicker-predefined', {
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb)
cb(start, end)
$('#js-daterangepicker-predefined').on('apply.daterangepicker', function (ev, picker) {
$(this).find('.js-daterangepicker-predefined-preview').html(
picker.startDate.format('MMMM D, YYYY') + ' - ' + picker.endDate.format('MMMM D, YYYY')
);
});
})
</script>
With arrow
<!-- Input Group -->
<div class="input-group">
<input type="text" id="with-arrow-field" class="js-daterangepicker form-control daterangepicker-custom-input">
<div class="input-group-append input-group-text" onclick="$('#with-arrow-field').data('daterangepicker').toggle();">
<i class="bi-chevron-down"></i>
</div>
</div>
<!-- End Input Group -->
Modal example
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-daterangepicker form-control daterangepicker-custom-input"
data-hs-daterangepicker-options='{
"parentEl": "#exampleModal"
}'>
</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 |
|---|---|---|
nextArrow |
Next arrow template. | <i class="bi-chevron-right daterangepicker-custom-arrow"></i> |
prevArrow |
Previous arrow template. | <i class="bi-chevron-left daterangepicker-custom-arrow"></i> |