Download the PHP package malzariey/filament-daterangepicker-filter without Composer
On this page you can find all versions of the php package malzariey/filament-daterangepicker-filter. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download malzariey/filament-daterangepicker-filter
More information about malzariey/filament-daterangepicker-filter
Files in malzariey/filament-daterangepicker-filter
Package filament-daterangepicker-filter
Short Description This package uses daterangepciker library to filter date by a range or predefined date ranges (Today , Yesterday ...etc)
License MIT
Homepage https://github.com/malzariey/filament-daterangepicker-filter
Informations about the package filament-daterangepicker-filter
Filament Date Range Picker and Filter
A native Alpine.js date range picker for Filament. Select date ranges, months, or years with support for presets, time selection, and full modal/slide-over compatibility.
Features
- 🗓️ Day, Month, or Year Picker - Choose the granularity that fits your needs
- ⌨️ Keyboard Input Support - Type dates directly with format validation
- 🎯 Modal Compatible - Dropdown teleports to body, solving z-index issues
- 🕐 Time Picker - Optional time selection with 12/24 hour format
- 🌍 Localization - Full i18n support via Day.js locales
- ♿ Accessible - Keyboard navigation and ARIA attributes
- 🎨 Native Filament UI - Seamlessly matches Filament v4 styling
Installation
Publish translations (optional):
Screenshots
Light mode
Dark mode
Basic Usage
As a Field
As a Filter
Picker Type Modes
Day Picker (Default)
Select specific dates:
Month Picker
Select entire months. The popup header includes previous/next-year buttons and a compact numeric year input, so users can jump to a year without stepping one year at a time.
Month picker mode also supports typed input. Pressing Enter applies the typed month value without falling through to day-picker selection behavior:
Range input works with the configured separator:
Example input:
Month picker year options and disabled months respect minYear(), maxYear(), minDate(), and maxDate():
Year Picker
Select entire years:
New Features
Keyboard Input
Allow users to type dates directly:
When allowInput() is enabled, pressing Enter while focused inside the input parses and applies the typed value first. Invalid partial input does not overwrite the previous valid selection unless the user clears the field.
Modal & Slide-Over Compatibility
The dropdown teleports to <body> by default to avoid z-index issues:
Dual State Mode
Store start and end dates in separate Livewire properties:
Custom Events
The component dispatches custom events for integration with Livewire or JavaScript:
| Event | Fired When |
|---|---|
apply.daterangepicker |
User clicks Apply or autoApply triggers |
cancel.daterangepicker |
User clicks Cancel or presses Escape |
show.daterangepicker |
Picker dropdown opens |
hide.daterangepicker |
Picker dropdown closes |
Configuration Options
Timezone
Start and End Dates
Min and Max Dates
First Day of Week
Time Picker
Auto Apply
Single Calendar
Disabled Dates
Display Format
Use PHP Carbon date format tokens. The JavaScript display format is auto-converted:
Note: The deprecated
->displayFormat('DD/MM/YYYY')method still works but is no longer recommended. Use->format()with PHP Carbon tokens instead — the JavaScript display format is auto-converted.
Predefined Ranges
Use Range Labels
Display preset labels instead of dates:
Disable Custom Range Selection
Drop and Open Directions
Max Span
Week Numbers
Day Picker Month/Year Dropdowns
Use showDropdowns() to show month and year dropdowns in the day picker header:
Month picker mode always shows its own numeric year input in the popup header and uses the same year/date constraints.
Filter Options
Custom Query
Filter Indicator
Migration from v3.x and v4.x
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). The JavaScript display format is auto-converted — there is no need to specify Day.js tokens manually.
New Methods
| Method | Description |
|---|---|
->monthPicker() |
Select months only |
->yearPicker() |
Select years only |
->allowInput() |
Enable keyboard date entry |
->teleport(bool) |
Control dropdown positioning (enabled by default) |
->useDualState(start, end) |
Store dates in separate properties |
->format('d/m/Y') |
Set date format using PHP Carbon tokens (auto-converts to JS) |
->pickerType(PickerType) |
Set picker granularity via enum |
Deprecated Methods
| Deprecated Method | Replacement | Since |
|---|---|---|
->displayFormat('DD/MM/YYYY') |
->format('d/m/Y') |
2.5.1 |
->setTimePickerOption() |
->timePicker() |
2.5.1 |
->setTimePickerIncrementOption() |
->timePickerIncrement() |
2.5.1 |
->setAutoApplyOption() |
->autoApply() |
2.5.1 |
->setLinkedCalendarsOption() |
->linkedCalendars() |
2.5.1 |
->getTimePickerIncrementOption() |
->getTimePickerIncrement() |
2.5.1 |
->getAutoApplyOption() |
->getAutoApply() |
2.5.1 |
->getLinkedCalendarsOption() |
->getLinkedCalendars() |
2.5.1 |
->getTimePickerOption() |
->getTimePicker() |
2.5.1 |
Credits
License
The MIT License (MIT). Please see License File for more information.
Acknowledgements
- Built with Alpine.js, Day.js, and Floating UI
- Special thanks to JetBrains for their support of open-source projects
All versions of filament-daterangepicker-filter with dependencies
spatie/laravel-package-tools Version ^1.16.4
illuminate/contracts Version ^8.0|^9.0|^10.0|^11.0|^12.0|^13.0