Date Range Filter

Flatpickr Filter with a configurable Minimum/Maximum value, provides two values to the filter() function () in the form of an array.

Usage

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']);
}),

Configuration Options

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']);
}),

Dependencies

This utilises the Flatpickr library.

There are several options for utilising the Flatpickr library!

Option 1 - NPM

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,

Option 2 - Including Inline

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,

Option 3 - In your template

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>

Demo