Use custom function for date ranges using the daterangepicker plugin
This is an example to use custom function for date ranges using the daterangepicker plugin
function setDateRange(elementId, form, diff, diffType, singleDate){
//Date range start
$('#'+elementId).daterangepicker(
{
//showWeekNumbers: true,
singleDatePicker: singleDate,
showDropdowns: true,
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')]
},
startDate: moment().subtract(diff, diffType),
endDate: moment(),
"opens": "center"
},
function (start, end) {
$('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
}
);
$('#'+elementId).on('apply.daterangepicker', function(ev, picker) {
$("#start-date").val(picker.startDate.format('YYYY-MM-DD'));
$("#end-date").val(picker.endDate.format('YYYY-MM-DD'));
$('#'+form).submit();
});
var $_GET = getQueryParams(document.location.search);
//change the selected date range of that picker
if($_GET['start-date'] != null && $_GET['end-date'] != null){
//$('#'+elementId).data('daterangepicker').setStartDate(moment($_GET['start-date']));
//$('#'+elementId).data('daterangepicker').setEndDate(moment($_GET['end-date']));
//$('#'+elementId).daterangepicker({ startDate: moment($_GET['start-date']), endDate: moment($_GET['end-date']) });
setSelectedDateRange(elementId, form, $_GET['start-date'],$_GET['end-date'],singleDate);
cb(moment($_GET['start-date']), moment($_GET['end-date']));
} else {
cb(moment().subtract(diff, diffType), moment());
}
function cb(start, end) {
$('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
}
//Date range end
}
function setSelectedDateRange(elementId, form, startDate, endDate, singleDate){
$('#'+elementId).daterangepicker(
{
//showWeekNumbers: true,
singleDatePicker: singleDate,
showDropdowns: true,
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')]
},
startDate: moment(startDate),
endDate: moment(endDate),
"opens": "center"
},
function (start, end) {
$('#'+elementId+' span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
}
);
$('#'+elementId).on('apply.daterangepicker', function(ev, picker) {
$("#start-date").val(picker.startDate.format('YYYY-MM-DD'));
$("#end-date").val(picker.endDate.format('YYYY-MM-DD'));
$('#'+form).submit();
});
}
How to use:
setDateRange('Form-btn1','listForm1',6,'days',false); setDateRange(''Form-btn2','listForm2',0,'days',true); setDateRange(''Form-btn3', 'listForm3', 1,'years',false);
The dateranges plugin require the following css and js files.
Include Required Prerequisites
//cdn.jsdelivr.net/jquery/1/jquery.min.js"
//cdn.jsdelivr.net/momentjs/latest/moment.min.js
//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css
Include Date Range Picker
//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js
//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css