Filament Date Range Picker and Filter

Install the package via Composer to add date range selection capabilities to your Filament project.

composer require malzariey/filament-daterangepicker-filter

(Optional) To customize the translation strings, publish the vendor translations:

php artisan vendor:publish --tag="filament-daterangepicker-filter-translations"

Breaking Changes

• jQuery/Moment.js removed: The component now uses Alpine.js and Day.js.
• Format tokens: Use ->format() with PHP Carbon tokens (e.g., d/m/Y). Do not use Day.js tokens manually; they are auto-converted.

Deprecated Methods (Use replacements instead)

Use the DateRangePicker class to add a date range selection field to your Filament forms.

use Malzarieyilament-daterangepicker-filter\Fields\DateRangePicker;

DateRangePicker::make('created_at'),

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('created_at'),

Keyboard Input

Use allowInput() to allow users to type dates directly. The component validates the format on Enter. Invalid partial input will not overwrite a previous valid selection unless the field is cleared.

Teleportation

To avoid z-index issues in Modals or Slide-overs, the dropdown teleports to the <body> by default. You can control this with teleport():

DateRangePicker::make('dates')
    ->teleport();      // Enabled by default

DateRangePicker::make('dates')
    ->teleport(false); // Disable teleportation

DateRangePicker::make('dates')
    ->allowInput();

DateRangePicker::make('dates')
    ->teleport(false);

The component dispatches browser events that can be intercepted via JavaScript or Livewire:

Example usage:

document.addEventListener('apply.daterangepicker', (e) => {
    console.log('Start:', e.detail.startDate);
    console.log('End:', e.detail.endDate);
    console.log('Formatted:', e.detail.formattedValue);
});

Enable monthPicker() mode to allow users to select entire months instead of specific days. This mode includes a compact numeric year input in the header for quick navigation.

When using monthPicker(), you can also enable keyboard input via allowInput() and specify a format. For example, 06/2026 - 08/2026 is a valid input format for month ranges.

Constraints like minYear(), maxYear(), minDate(), and maxDate() are respected in this mode.

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('billing_period')
    ->monthPicker()
    ->singleCalendar()
    ->allowInput()
    ->format('m/Y');

Enable yearPicker() mode to allow users to select entire years.

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('fiscal_years')
    ->yearPicker()
    ->format('Y')
    ->minYear(2020)
    ->maxYear(2030);

If you need to store the start and end dates in separate Livewire properties instead of a single range string, use useDualState().

DateRangePicker::make('date_range')
    ->useDualState('start_date', 'end_date');

// In your Livewire component:
public ?string $start_date = null;
public ?string $end_date = null;

Use the DateRangeFilter class to add a date range filter to your Filament tables.

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at'),

When using DateRangeFilter in a table, you can customize how the selected range affects the database query using modifyQueryUsing().

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')
    ->modifyQueryUsing(fn(Builder $query, ?Carbon $startDate, ?Carbon $endDate, $dateString) =>
        $query->when(!empty($dateString),
            fn(Builder $query) => $query->whereBetween('created_at', [$startDate, $endDate])
        )
    );

You can also add a filter indicator using withIndicator().

The DateRangePicker class is a Filament field used to allow users to select a range of dates within a form. It stores the selection as a single string, typically formatted with a separator (e.g., 2023-01-01 - 2023-01-31).

Key features include:

• Predefined date ranges (e.g., 'Last 7 Days', 'This Month').
• Custom date formatting and separators.
• Support for single calendar views or linked calendars.
• Constraints like minDate, maxDate, and disabledDates.

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('appointment_range')