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

2.4.1 2024-03-16 10:13 UTC

README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

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

DateRangePicker Widget

Dark mode

DateRangePicker Widget


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.