malzariey/filament-daterangepicker-filter
Native Alpine.js date range picker and filter for Filament with day, month, and year modes, presets, optional time selection, keyboard input, localization, and modal/slide-over compatibility. Includes drop-in DateRangePicker field and DateRangeFilter.
getSystemTimezone() returned FilamentTimezone::get(). That is Filament's display timezone — core reads it for date-time columns, entries and pickers, and it falls back to config('app.timezone') when unset. The timezone a column is stored in is config('app.timezone'), which is what Eloquent writes with.
While nobody calls FilamentTimezone::set() the two resolve to the same value and nothing is wrong. The moment somebody sets it — the documented way to show local times over UTC storage — the conversion in apply() became a no-op: input and system resolved to the same zone, so the parsed dates kept their local offset, and Laravel binds them with format(), which does not convert. Local wall-clock then reached the query against UTC data.
Measured on a UTC column with the display set to Asia/Riyadh, filtering a single day:
bindings 2026-08-18 00:00:00 / 2026-08-18 23:59:59 (+03 wall-clock)
row stored 2026-08-17 22:00:00 (01:00 that morning in Riyadh)
returned excluded
Every row falling in the first hours of a local day was filed under the day before — silently, which is the worst way for a date filter to be wrong.
getTimezone() now defaults to FilamentTimezone::get() — the zone the dates on screen are written in.getSystemTimezone() now returns config('app.timezone') — the zone the column is stored in.This matches what Filament's own DateTimePicker does.
No action needed, and nothing changes for you unless you call FilamentTimezone::set(). When it is unset it returns config('app.timezone'), so both getters resolve exactly as before.
FilamentTimezone |
5.0.6 | 5.0.7 |
|---|---|---|
| unset (default) | input=UTC, storage=UTC | identical |
Asia/Riyadh, UTC column |
input=Riyadh, storage=Riyadh — wrong | input=Riyadh, storage=UTC — correct |
New systemTimezone() setter, for a column genuinely stored outside the application timezone:
DateRangeFilter::make('created_at')->systemTimezone('Asia/Riyadh');
Covered by tests/TimezoneSeparationTest.php — five tests, four of which fail without the fix.
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/5.0.5...5.0.6
This patch release completes the editable month picker work and fixes the input-mask crash found while testing the demo environment.
01/22 in monthPicker()->singleCalendar()->allowInput()->format('m/Y') no longer causes a maximum call stack error.monthPicker()->singleCalendar()->allowInput()->format('m/Y')npm test: 116 passednpm run build: passed, rebuilt dist assetscomposer test: 148 passedphp -l workbench/app/Filament/Pages/DemoPage.php: passedPatch release for month picker editing and keyboard handling fixes.
minYear, maxYear, minDate, and maxDate configuration.showDropdowns() day picker behavior remains unchanged.dist assets are included.npm test: 4 test files passed, 114 tests passed.npm run build: completed successfully and regenerated dist assets.composer test: 148 tests passed, 213 assertions.Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/5.0.0...5.0.1
A ground-up rewrite replacing jQuery & Moment.js with a native Alpine.js component powered by Day.js.
This is a major release with breaking changes. The entire frontend has been rebuilt from scratch for better performance, smaller bundle size, and seamless Filament v4/v5 integration.
[@floating-ui](https://github.com/floating-ui)/dom for robust dropdown placement that handles scroll, resize, and viewport edges automatically.->monthPicker() for selecting month ranges->yearPicker() for selecting year ranges->allowInput() enables typed date entry with format-aware masking->teleport() (enabled by default) moves the dropdown to <body>, solving z-index issues in modals and slide-overs->dualState('start_field', 'end_field') syncs to two separate Livewire properties->format('Y-m-d') uses PHP Carbon tokens. The package auto-converts to Day.js tokens for the frontend.ar, cs, da, de, el, es, fa, fr, he, hu, id, it, ko, ku, lt, lv, nb, nl, pl, pt, pt-br, ro, ru, sk, sl, tr, uk, uz, vi, zh-cn, zh-twasync init(). Locales are bundled, eliminating runtime import latency.==/!= replaced with ===/!== across the codebase.| Removed | Replaced By |
|---|---|
jquery |
Alpine.js (bundled with Filament) |
moment / moment-timezone |
dayjs ^1.11 |
daterangepicker (jQuery plugin) |
Native Alpine.js component |
- ->displayFormat('DD/MM/YYYY') // Day.js tokens (still works, deprecated)
+ ->format('d/m/Y') // PHP Carbon tokens (recommended)
These methods still work but will be removed in a future version:
| Deprecated | Use Instead |
|---|---|
->displayFormat('DD/MM/YYYY') |
->format('d/m/Y') |
->setTimePickerOption(true) |
->timePicker() |
->setTimePickerIncrementOption(15) |
->timePickerIncrement(15) |
->setTimePicker24HourOption(true) |
->timePicker24() |
->setTimePickerSecondOption(true) |
->timePickerSecond() |
->setAutoApplyOption(true) |
->autoApply() |
Filament\Support\Facades\FilamentTimezone for system timezonecomposer require malzariey/filament-daterangepicker-filter:^5.0
If you were manually including jQuery or Moment.js for this package, remove them — they're no longer needed.
// Before (v4)
DateRangePicker::make('range')->displayFormat('DD/MM/YYYY');
// After (v5) — use PHP Carbon tokens
DateRangePicker::make('range')->format('d/m/Y');
// Month picker
DateRangePicker::make('month_range')->monthPicker();
// Year picker
DateRangePicker::make('year_range')->yearPicker();
// Manual input with masking
DateRangePicker::make('range')->allowInput();
// Dual state (sync to two separate properties)
DateRangePicker::make('range')->dualState('start_date', 'end_date');
| Requirement | Version |
|---|---|
| PHP | ^8.1 |
| Laravel | ^10.0 | ^11.0 | ^12.0 | ^13.0 |
| Filament | ^4.0 | ^5.0 |
| Package | Version | Purpose |
|---|---|---|
dayjs |
^1.11 | Date manipulation |
[@floating-ui](https://github.com/floating-ui)/dom |
^1.6 | Dropdown positioning |
imask |
^7.6 | Input masking |
Thanks to all contributors who helped shape this release:
Full Changelog: 4.0.9...5.0.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.8...4.0.9
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.2...4.1.beta.2
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.2...4.0.8
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.1...4.0.7
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.6...4.0.2
This release marks a significant milestone in the evolution of the Filament DateRangePicker. We have completely rewritten the core implementation, moving away from heavy legacy dependencies to a modern, lightweight, and reactive stack perfectly aligned with the Filament ecosystem.
jquery, moment, and the legacy daterangepicker.js file have been removed.resources/js/filament-daterangepicker.js.$('#picker').on('apply.daterangepicker', ...)) are no longer supported. Use native event listeners or Alpine.js bindings.We now dispatch native CustomEvents directly on the component element, making integration with Livewire and vanilla JS easier than ever:
// Listen for events
element.addEventListener('apply.daterangepicker', (e) => {
console.log('New Date Range:', e.detail); // { start, end, label }
});
Available events: show, hide, apply, cancel.
This release is backed by a comprehensive new test suite:
No special steps required beyond updating the package. Run the build command to ensure the new assets are compiled:
npm run build
Note: This is a beta release. Please report any issues on the GitHub repository.
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.4.3...4.0.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/4.0.0...3.4.3
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.4.1...3.4.2
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.4.0...3.4.1
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.3.1...3.4.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.3.0...3.3.1
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.2.3...3.3.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.2.2...3.2.3
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.2.1...3.2.2
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.2.0...3.2.1
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.1.2...3.2.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.1.1...3.1.2
->modalAutofocus(false)) to modal @malzarieyFull Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.1.0...3.1.1
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.5...3.1.beta
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.4...3.0.5
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.3...3.0.4
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.2...3.0.3
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.1...3.0.2
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/3.0.0...3.0.1
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/2.8.0...3.0.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/2.7.3...2.8.0
Full Changelog: https://github.com/malzariey/filament-daterangepicker-filter/compare/2.7.2...2.7.3
How can I help you explore Laravel packages today?