Date range picker
Standard Date Range Picker
the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".
<div class="input-group">
<span class="input-group-text text-secondary" id="calendarpciker">
<i data-feather="calendar"></i>
</span>
<input type="text" class="form-control" id="daterangepicker" />
</div>
<script>
/* This script with id already added in function.js */
if($('#daterangepicker').length > 0) {
$('#daterangepicker').daterangepicker({
"minYear": 2023,
"autoApply": true,
"linkedCalendars": false,
"alwaysShowCalendars": true,
"startDate": "19/03/2024",
"endDate": "25/03/2024",
"opens": "center",
"buttonClasses": "btn",
"drops": "down",
"locale": {
"format": 'DD/MM/YYYY'
},
"applyButtonClasses": "btn-theme",
"cancelClass": "btn-light"
}, function (start, end, label) {
//console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
}
</script>
Single Date Picker
<div class="input-group">
<span class="input-group-text text-secondary"> <i data-feather="calendar"></i> </span>
<input type="text" class="form-control" id="datepicker" />
</div>
<script>
/* This script with id already added in function.js */
if ($('#datepicker').length > 0) {
$('#datepicker').daterangepicker({
"singleDatePicker": true,
"minYear": 2023,
"autoApply": true,
"linkedCalendars": false,
"alwaysShowCalendars": true,
"startDate": "19/03/2024",
"endDate": "25/03/2024",
"opens": "center",
"buttonClasses": "btn",
"drops": "up",
"locale": {
"format": 'DD/MM/YYYY'
},
"applyButtonClasses": "btn-theme",
"cancelClass": "btn-light"
}, function (start, end, label) {
//console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
}
</script>Date Range Picker with Ranges
<div class="input-group">
<span class="input-group-text text-secondary" id="calendarpcikerrange">
<i data-feather="calendar"></i>
</span>
<input type="text" class="form-control" id="daterangepickerranges" />
</div>
<script>
/* This script with id already added in function.js */
if ($('#daterangepicker').length > 0) {
$('#daterangepicker').daterangepicker({
"minYear": 2023,
"autoApply": true,
"linkedCalendars": false,
"alwaysShowCalendars": true,
"startDate": "19/03/2024",
"endDate": "25/03/2024",
"opens": "center",
"buttonClasses": "btn",
"drops": "down",
"locale": {
"format": 'DD/MM/YYYY'
},
"applyButtonClasses": "btn-theme",
"cancelClass": "btn-light",
"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')]
},
}, function (start, end, label) {
//console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
}
</script>
Inline Calendar
<div class="inlinewrap1 inline-calendar mx-auto"></div>
<input type="text" id="inlinewrap1" class="d-none">
<script>
/* This script with id already added in function.js */
if ($('#inlinewrap1').length > 0) {
$('#inlinewrap1').daterangepicker({
"singleDatePicker": true,
"minYear": 2023,
"autoApply": true,
"linkedCalendars": false,
"alwaysShowCalendars": true,
"parentEl": ".inlinewrap1",
"startDate": "19/03/2024",
"endDate": "25/03/2024",
"opens": "center",
"buttonClasses": "btn",
"drops": "up",
"locale": {
"format": 'DD/MM/YYYY'
},
"applyButtonClasses": "btn-theme",
"cancelClass": "btn-light"
}, function (start, end, label) {
//console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
/* inline calendar activate */
$('#inlinewrap1').click();
}
</script>