-
Notifications
You must be signed in to change notification settings - Fork 0
Date Range Filter
Flatpickr Filter with a configurable Minimum/Maximum value, provides two values to the filter() function () in the form of an array.
Include the class after your namespace declaration
use LowerRockLabs\LaravelLivewireTablesAdvancedFilters\DateRangeFilter;
In the filters() function in your data table component:
DateRangeFilter::make('Created Date')
->filter(function (Builder $builder, array $dateRange) {
$builder->whereDate('created_at', '>=', $dateRange['minDate'])->whereDate('created_at', '<=', $dateRange['maxDate']);
}),
Sensible defaults can be set within the configuration file. However, the following variables can be set on a per-filter basis. You can set as many or as few configuration options as you like, the remainder will be set to the default from the configuration file.
DateRangeFilter::make('Created Date')
->config([
'altFormat' => 'F j, Y', // The date format to be displayed once a date is selected
'ariaDateFormat' => 'F j, Y', // The date format to be displayed for screen-readers
'dateFormat' => 'Y-m-d', // The date format to be returned for use in the filter
'earliestDate' => '2022-01-01', // The earliest date permitted, this is not required
'latestDate' => date('Y-m-d') // The latest date permitted, this is not required
])
->filter(function (Builder $builder, array $dateRange) {
$builder->whereDate('created_at', '>=', $dateRange['minDate'])
->whereDate('created_at', '<=', $dateRange['maxDate']);
}),
This utilises the Flatpickr library.
There are several options for utilising the Flatpickr library!
Install flatpickr
npm i flatpickr --save
Import flatpickr into your project's app.js
import flatpickr from "flatpickr";
import '../../node_modules/flatpickr/dist/flatpickr.min.css';
Ensure that the publishFlatpickrJS and publishFlatpickrCSS are both set to false in the config file.
// Set to true if you need to include the Flatpickr JS
'publishFlatpickrJS' => false,
// Set to true if you need to include the Flatpickr CSS
'publishFlatpickrCSS' => false,
Ensure that the publishFlatpickrJS and publishFlatpickrCSS are both set to true in the config file.
// Set to true if you need to include the Flatpickr JS
'publishFlatpickrJS' => true,
// Set to true if you need to include the Flatpickr CSS
'publishFlatpickrCSS' => true,
Ensure that the publishFlatpickrJS and publishFlatpickrCSS are both set to false in the config file.
// Set to true if you need to include the Flatpickr JS
'publishFlatpickrJS' => false,
// Set to true if you need to include the Flatpickr CSS
'publishFlatpickrCSS' => false,
Add both the CSS and JS files to your template. It is recommended that you use a static version in order that you can use an integrity check.
CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" integrity="sha256-GzSkJVLJbxDk36qko2cnawOGiqz/Y8GsQv/jMTUrx1Q=" crossorigin="anonymous">
JS
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js" integrity="sha256-Huqxy3eUcaCwqqk92RwusapTfWlvAasF6p2rxV6FJaE=" crossorigin="anonymous"></script>