DatePicker

Flatpickr Filter with a configurable Minimum/Maximum value, provides one values to the filter() function

Usage

Include the class after your namespace declaration

use LowerRockLabs\LaravelLivewireTablesAdvancedFilters\DatePickerFilter;

In the filters() function in your data table component:

DatePickerFilter::make('Created Date')
->filter(function (Builder $builder, string $date) {
    $builder->where('created_at', '>=', $date);
}),

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.

DatePickerFilter::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
    'timeEnabled' => false, // Enable time selection
    'allowInput' => true, // Allow/disallow manual input into the text field
    '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, string $date) {
    $builder->where('created_at', '>=', $date);
}),

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>