Contoh penggunaan Date Range Picker di Laravel untuk membuat filter berdasarkan rentang waktu tertentu dan ditampilkan di dashboard
<!-- button (bootstrap) untuk menampilkan filter tanggalnya -->
<button type="button" id="dashboard_date_filter" class="d-flex align-items-center justify-content-center w-100 gap-1 px-3 py-2 text-dark bg-white border border-1 border-dark">
<svg aria-hidden="true" class="bi bi-calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" width="1.25em" height="1.25em">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
<path d="M16 3v4" />
<path d="M8 3v4" />
<path d="M4 11h16" />
<path d="M7 14h.013" />
<path d="M10.01 14h.005" />
<path d="M13.01 14h.005" />
<path d="M16.015 14h.005" />
<path d="M13.015 17h.005" />
<path d="M7.01 17h.005" />
<path d="M10.01 17h.005" />
</svg>
<span>
Filter menurut tanggal
</span>
<svg aria-hidden="true" class="bi bi-chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" width="1.25em" height="1.25em">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 9l6 6l6 -6" />
</svg>
</button>
-
Button dikasih
idcontohdashboard_date_filter -
Icon
svgopsional,svgpertama icon kalender dan yang kedua icon chevron down -
Teks
Filter menurut tanggalada di dalam tag<span>karena nantinya teks ini akan berubah sesuai dengan range yang dipilih
<!-- include CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- include JS -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(document).ready(function() {
// menambahkan pilihan range
var ranges = {};
ranges['Hari ini'] = [moment(), moment()];
ranges['Kemarin'] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
ranges['Dalam 7 hari terakhir'] = [moment().subtract(6, 'days'), moment()];
ranges['Dalam 30 hari terakhir'] = [moment().subtract(29, 'days'), moment()];
ranges['Bulan ini'] = [moment().startOf('month'), moment().endOf('month')];
ranges['Bulan sebelumnya'] = [
moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month'),
];
ranges['Bulan ini tahun lalu'] = [
moment().subtract(1, 'year').startOf('month'),
moment().subtract(1, 'year').endOf('month'),
];
ranges['Tahun ini'] = [moment().startOf('year'), moment().endOf('year')];
ranges['Tahun lalu'] = [
moment().startOf('year').subtract(1, 'year'),
moment().endOf('year').subtract(1, 'year'),
];
// untuk pilihan custom range
var clear = 'Hapus';
var apply = 'Terapkan';
var custom_range = 'Rentang waktu';
var moment_date_format = 'DD/MM/YYYY';
// setting daterangepicker
var dateRangeSettings = {
ranges: ranges,
startDate: moment().startOf('year'),
endDate: moment().endOf('year'),
locale: {
cancelLabel: clear,
applyLabel: apply,
customRangeLabel: custom_range,
format: moment_date_format,
toLabel: '~',
},
};
// pengecekan apakah ada elemen dengan id dashboard_date_filter
if ($('#dashboard_date_filter').length === 1) {
dateRangeSettings.startDate = moment();
dateRangeSettings.endDate = moment();
// inisialisasi daterangepicker
$('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end, label) {
// mengubah teks di button sesuai dengan range terpilih
$('#dashboard_date_filter span').html(
start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
);
// saat range terpilih, kirim request POST untuk mengambil data
$.ajax({
url: '/update-statistics',
method: 'POST',
data: {
start_date: start.format('YYYY-MM-DD'),
end_date: end.format('YYYY-MM-DD'),
_token: '{{ csrf_token() }}' // csrf token dari Laravel
},
success: function(response) {
// tampilkan total
$('#total_penjualan').html(response.total_penjualan_formatted);
$('#total_pembelian').html(response.total_pembelian_formatted);
$('#total_beli_kembali').html(response.total_beli_kembali_formatted);
// tampilkan label sesuai dengan range terpilih
$('#label_total_penjualan').html('Total Penjualan<br>' + label);
$('#label_total_pembelian').html('Total Pembelian<br>' + label);
$('#label_total_beli_kembali').html('Total Beli Kembali<br>' + label);
}
});
});
}
});
</script>
// route
Route::post('/update-statistics', [HomeController::class, 'updateStatistics']);
// controller
public function updateStatistics(Request $request)
{
$startDate = $request->input('start_date');
$endDate = $request->input('end_date');
$total_penjualan = Penjualan::whereBetween('tanggal', [$startDate, $endDate])->sum('total');
$total_pembelian = Pembelian::whereBetween('tanggal', [$startDate, $endDate])->sum('total');
$total_beli_kembali = BeliKembali::whereBetween('tanggal', [$startDate, $endDate])->sum('total');
return response()->json([
'total_penjualan_formatted' => number_format($total_penjualan),
'total_pembelian_formatted' => number_format($total_pembelian),
'total_beli_kembali_formatted' => number_format($total_beli_kembali),
]);
}
Referensi:
Posting Komentar