Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Filament Daterangepicker Filter

Filament Daterangepicker Filter Laravel Package

malzariey/filament-daterangepicker-filter

Alpine.js-powered date range picker and filter for Filament. Pick day/month/year ranges with presets, optional time selection (12/24h), keyboard input validation, localization, accessibility, and modal/slide-over friendly dropdown teleport. Matches Filament v4 UI.

View on GitHub
Deep Wiki
Context7

At a glance

Frequently asked questions about Filament Daterangepicker Filter
How do I install the Filament DateRangePicker in my Laravel project?
Run `composer require malzariey/filament-daterangepicker-filter` to install the package. If you need localization, publish translations with `php artisan vendor:publish --tag="filament-daterangepicker-filter-translations"`. No additional setup is required for basic usage.
Does this package work with Filament v3.x or only v4?
This package is explicitly built for **Filament v4** and fully supports its architecture. Limited support exists for v3.x, but manual adjustments may be required if migrating from v3.x. Check the changelog for migration notes.
Can I use this for month/year ranges instead of just days?
Yes! The package supports **day, month, and year picker modes**. Use `monthPicker()` for month ranges or `yearPicker()` for year ranges. Each mode includes presets and customizable formats like `'F Y'` for months or `'Y'` for years.
How do I customize the SQL query for filtering dates?
Use the `modifyQueryUsing` callback to inject custom SQL logic. For example, override the default `whereBetween` to handle overlapping ranges or custom date logic. This is useful for complex filtering scenarios beyond simple range queries.
Will this work with Livewire and reactive updates?
Yes, the package integrates natively with Livewire. It emits custom events like `apply.daterangepicker` and `cancel.daterangepicker`, allowing you to react to changes in your Livewire components. Dual-state mode also syncs with Livewire properties like `start_date` and `end_date`.
Does the date picker support time selection (e.g., 12/24-hour format)?
Yes, time selection is optional. Enable it with `->withTime()` on the field or filter. You can choose between 12-hour or 24-hour formats using `->timeFormat('H:i')` or `->timeFormat('h:i A')`.
How does localization work, and can I translate it to other languages?
Localization is built-in via Day.js locales. Publish translations first, then set the locale in your app (e.g., `app()->setLocale('fr')`). The package aligns with Laravel’s localization system, so you can use any supported locale.
Are there performance concerns with large datasets?
The picker itself is lightweight (Alpine.js + Day.js), but client-side validation (e.g., disabled dates) runs in the browser. For large datasets, ensure your backend query logic in `modifyQueryUsing` is optimized. Default `whereBetween` is efficient for most use cases.
Can I use this in a modal or slide-over without z-index issues?
Yes, the picker teleports to `<body>` by default, solving z-index conflicts. This ensures it works seamlessly in modals, slide-overs, or nested Filament panels without overlapping issues.
What alternatives exist for Filament date range pickers?
Alternatives include jQuery-based plugins like `daterangepicker` (legacy) or custom solutions using Alpine.js + Flatpickr. However, this package is the **only native Filament v4-compatible** option with built-in filter support, presets, and full UI alignment. It avoids jQuery/Moment.js dependencies for a modern stack.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
codifyo/ts-generator-bundle
andydefer/laravel-cluster
testo/fiber
mintobit/jobqueue
a4sex/maintenance-bundle
a4sex/entity-date-update
a4sex/client-identifier
a4sex/base-utilites
a4sex/key-value-storage
a4sex/micro-status
chilldev/dependency-injection-extra
datinglibre/datinglibre-app-api
biberltd/corebundle
bricre/symfony-bundle-test
biberltd/logbundle
dominium/http-adapter-bundle
dominium/google-analytics
a4sex/auto-clean-entity
christhompsontldr/laravel-inky
spatie/mailcoach-vapor