malzariey / filament-daterangepicker-filter
This package uses daterangepciker library to filter date by a range or predefined date ranges (Today , Yesterday ...etc)
Fund package maintenance!
Malzariey
Installs: 59 148
Dependents: 3
Suggesters: 0
Security: 0
Stars: 54
Watchers: 3
Forks: 24
Open Issues: 7
Language:JavaScript
Requires
- php: ^8.0
- filament/filament: ^2.0|^3.0
- illuminate/contracts: ^8.0|^9.0|^10.0|^11.0
- spatie/laravel-package-tools: ^1.15
Requires (Dev)
- nunomaduro/collision: ^7.0.0
- pestphp/pest: ^2.0
- pestphp/pest-plugin-laravel: ^2.1
- pestphp/pest-plugin-livewire: ^2.0
- phpunit/phpunit: ^10.0.0
- spatie/laravel-ray: ^1.26
This package is auto-updated.
Last update: 2024-03-25 07:40:31 UTC
README
This package uses daterangepciker library to filter date by a range or predefined date ranges (Today , Yesterday ...etc)
Installation
You can install the package via composer:
composer require malzariey/filament-daterangepicker-filter
You can publish the config file with:
Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-daterangepicker-filter-views"
Usage
As a Field
DateRangePicker::make('created_at'),
As a Filter
DateRangeFilter::make('created_at'),
Options
->label('My Picker')
->timezone('UTC')
//Default Start Date
->startDate(Carbon::now())
//Default EndDate
->endDate(Carbon::now())
->firstDayOfWeek(1)
->alwaysShowCalendar(false)
->setTimePickerOption(true)
->setTimePickerIncrementOption(2)
//No need for Apply button
->setAutoApplyOption(true)
//Show two Calendars
->setLinkedCalendarsOption(true)
->disabledDates(['array of Dates'])
->minDate(\Carbon\Carbon::now()->subMonth())
->maxDate(\Carbon\Carbon::now()->addMonth())
//Filament Date Format (PHP)
->displayFormat('date format')
//Picker Date Format (Javascript)
->format('date format')
//Updating Query
->query(
fn(Builder $query) => $query->whereNot('name', '=','majid')
)
->withIndicator()
->ranges([
'Last 3 days' => [now()->subDays(3), now()],
])
->useRangeLabels()
->disableCustomRange()
->separator(' - ')
In Admin Panal
Light mode
Dark mode
Styling
If you're building a custom Filament theme, you need one more step to make the calendar theme match your custom theme.
Add this line to your resources/css/filament.css
file.
@import '../../vendor/malzariey/filament-daterangepicker-filter/resources/css/filament-daterangepicker.css';
Changelog
Please see CHANGELOG for more information on what has changed recently.
Credits
License
The MIT License (MIT). Please see License File for more information.