Package Data | |
---|---|
Maintainer Username: | malzariey |
Maintainer Contact: | malzariey@gmail.com (Majid Al-Zariey) |
Package Create Date: | 2023-03-01 |
Package Last Update: | 2024-10-22 |
Language: | JavaScript |
License: | MIT |
Last Refreshed: | 2024-10-30 03:00:03 |
Package Statistics | |
---|---|
Total Downloads: | 263,095 |
Monthly Downloads: | 48,527 |
Daily Downloads: | 2,129 |
Total Stars: | 107 |
Total Watchers: | 3 |
Total Forks: | 46 |
Total Open Issues: | 2 |
This package that adds a date range picker and filter to the Filament panel using the daterangepicker
library. It provides options to filter dates by a specific range or predefined ranges such as "Today", "Yesterday", etc.
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"
use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;
DateRangePicker::make('created_at'),
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at'),
Set the picker timezone, defaults to the project timezone. Example setting timezone to 'UTC'.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->timezone('UTC')
You can specify initial selected Start and End Dates for the filter. The following example will initialize the filter to today's date.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->startDate(Carbon::now())->endDate(Carbon::now())
You could also use a shortcut for above using the following
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->defaultToday()
Specify the minimum and maximum dates for the calendar. The following example will only enable selecting previous month to next month.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->minDate(Carbon::now()->subMonth())->maxDate(Carbon::now()->addMonth())
Set Monday as the first day of the week on the calendar of your DateRangeFilter.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->firstDayOfWeek(1)
Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->alwaysShowCalendar()
Adds select boxes to choose times in addition to dates.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->timePicker()
Show seconds in the timePicker.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->timePickerSecond()
Use 24-hour instead of 12-hour times, removing the AM/PM selection
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->timePicker24()
Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->timePickerIncrement(30)
Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
Note: Does not work with timePicker
option.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->autoApply()
When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->linkedCalendars()
Show only a single calendar to choose one date, instead of a range picker with two calendars. Used Only with DateRangePicker
.
use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;
DateRangePicker::make('created_at')->singleCalendar()
Indicate whether that date should be available for selection or not.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->disabledDates(['array of Dates'])
Specify the format for the display and selection of dates.
DateRangeFilter::make('created_at')
//Picker Date Display Format in (Javascript Date Format)
->displayFormat('date format')
//Carbon Format reading from the Javascript displayFormat in (PHP Date Format)
->format('date format')
Apply a custom filter query.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Illuminate\Database\Eloquent\Builder;
use Carbon\Carbon;
DateRangeFilter::make('created_at')
->modifyQueryUsing(fn(Builder $query, ?Carbon $startDate , ?Carbon $endDate , $dateString) =>
$query->when(!empty($dateString),
fn (Builder $query, $date) : Builder =>
$query->whereBetween('created_at', [$startDate->subDays(3),$endDate]))
)
Show an indicator when the filter is active.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->withIndicator()
Customize the predefine date ranges for quick selection.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')
->ranges(['Last 3 days' => [now()->subDays(3), now()]])
By using the useRangeLabels
function, it enables the field to display the predefined range labels instead of actual date ranges. This can simplify the display and make it more user-friendly.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->useRangeLabels()
If you want the users to only choose from the predefined ranges and prevent them from selecting custom ranges, you can use the disableCustomRange option.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->disableCustomRange()
Specify the separator for the date range.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->separator(' - ')
Specify the location the filter menu should drop at.
DropDirection::DOWN
: The picker will appear below field. (Default)
DropDirection::AUTO
: Auto decide the location.
DropDirection::UP
: The picker will appear above field.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Malzariey\FilamentDaterangepickerFilter\Enums\DropDirection;
DateRangeFilter::make('created_at')->drops(DropDirection::AUTO)
Specify the location the filter menu should open to.
OpenDirection::LEFT
: The picker will appear left to the field. (Default)
OpenDirection::RIGHT
: The picker will appear right to the field.
OpenDirection::CENTER
: The picker will appear center of the field.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Malzariey\FilamentDaterangepickerFilter\Enums\OpenDirection;
DateRangeFilter::make('created_at')->opens(OpenDirection::LEFT)
If you have selected a date range and want to remove it, simply click on the calendar icon within the field.
To disable this behavior, you can use the disableClear()
method. This will prevent the user from clearing the selected date range.
To customize the icon, you can use the icon()
method. It accepts a string or Closure.
use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;
DateRangeFilter::make('created_at')->disableClear()
DateRangePicker::make('created_at')->disableClear()
DateRangeFilter::make('created_at')->icon('heroicons-backspace')
DateRangePicker::make('created_at')->icon('heroicons-backspace')
If you wish to disable the predefined ranges feature and provide users with a custom selection only, you may use the disableRanges()
method. This will remove any preset date ranges from the picker.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->disableRanges()
The maximum span between the selected start and end dates.
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
DateRangeFilter::make('created_at')->maxSpan(['months' => 1]), // days, months or years
Show localized or ISO week numbers at the start of each week on the calendars.
use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;
DateRangeFilter::make('created_at')->showWeekNumbers() // Localized
DateRangePicker::make('created_at')->showISOWeekNumbers()
Show month and year select boxes above calendars to jump to a specific month and year. You can also customize, minimum and maximum year shown in the dropdowns.
use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;
DateRangeFilter::make('created_at')->showDropdowns()->minYear(2000)->maxYear(2030)
DateRangePicker::make('created_at')->showDropdowns()->minYear(2000)->maxYear(2030)
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/{panel_name}/theme.css
file.
@import '/vendor/malzariey/filament-daterangepicker-filter/resources/css/filament-daterangepicker.css';
The MIT License (MIT). Please see License File for more information.