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.
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?