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 init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
// Initialization OF Date Range Picker
$('input[name="dates"]').daterangepicker();
</script>
<input type="text" class="js-daterangepicker form-control">
<script>
$(function() {
$('.js-daterangepicker').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
<input type="text" class="time-js-daterangepicker form-control">
<script>
$(function() {
$('.time-js-daterangepicker').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
<input type="text" class="empty-js-daterangepicker form-control">
<script>
$(function() {
$('.empty-js-daterangepicker').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('.empty-js-daterangepicker').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('.empty-js-daterangepicker').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
<button id="predefined-js-daterangepicker" class="btn btn-white">
<i class="bi bi-calendar4-week"></i>
<span></span> <i class="bi bi-caret-down-fill"></i>
</button>
<script>
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#predefined-js-daterangepicker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#predefined-js-daterangepicker').daterangepicker({
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);
});
</script>
<input type="text" class="single-js-daterangepicker form-control">
<script>
$(function() {
$('.single-js-daterangepicker').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
});
</script>