🚀 v5.0 — Complete Rewrite: Alpine.js + Day.js

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.

✨ What's New

Architecture

Alpine.js Native — No more jQuery dependency. The picker is a first-class Alpine.js component with full Livewire reactivity.
Day.js — Replaced Moment.js (330KB) with Day.js (7KB) for date manipulation. ~97% smaller.
Floating UI — Replaced manual positioning with @floating-ui/dom for robust dropdown placement that handles scroll, resize, and viewport edges automatically.
IMask.js — Integrated input masking for precise manual date entry with auto-padding and block navigation.

New Features

🗓️ Month Picker — ->monthPicker() for selecting month ranges
📅 Year Picker — ->yearPicker() for selecting year ranges
⌨️ Manual Input — ->allowInput() enables typed date entry with format-aware masking
🎯 Teleport — ->teleport() (enabled by default) moves the dropdown to <body>, solving z-index issues in modals and slide-overs
♿ Keyboard Navigation — Full arrow key, Home/End, PageUp/PageDown, Enter/Escape support
🔗 Dual State Fields — ->dualState('start_field', 'end_field') syncs to two separate Livewire properties
📝 PHP Format Tokens — ->format('Y-m-d') uses PHP Carbon tokens. The package auto-converts to Day.js tokens for the frontend.
🌍 32 Bundled Locales — All locales are statically imported and work without async loading: 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-tw

Performance & Quality

⚡ Synchronous Init — No more async init(). Locales are bundled, eliminating runtime import latency.
🧹 Static Format Map — PHP→Day.js format conversion uses a static class constant instead of rebuilding on every call.
🎯 Strict Comparisons — All ==/!= replaced with ===/!== across the codebase.
🧪 148 Tests — Comprehensive Pest test suite covering fields, filters, formats, Livewire integration, and default presets.

💥 Breaking Changes

Dependencies Removed

Removed	Replaced By
`jquery`	Alpine.js (bundled with Filament)
`moment` / `moment-timezone`	`dayjs` ^1.11
`daterangepicker` (jQuery plugin)	Native Alpine.js component

API Changes

Format Method

- ->displayFormat('DD/MM/YYYY')  // Day.js tokens (still works, deprecated)
+ ->format('d/m/Y')              // PHP Carbon tokens (recommended)

Deprecated Methods

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 Version

Requires Filament v4.0+ or Filament v5.0+
Uses Filament\Support\Facades\FilamentTimezone for system timezone

📋 Migration Guide

1. Update Dependencies

composer require malzariey/filament-daterangepicker-filter:^5.0

2. Remove jQuery/Moment Assets

If you were manually including jQuery or Moment.js for this package, remove them — they're no longer needed.

3. Update Format Calls

// Before (v4)
DateRangePicker::make('range')->displayFormat('DD/MM/YYYY');

// After (v5) — use PHP Carbon tokens
DateRangePicker::make('range')->format('d/m/Y');

4. New Features (Optional)

// 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');

📦 Requirements

Requirement	Version
PHP	^8.1
Laravel	^10.0 \| ^11.0 \| ^12.0 \| ^13.0
Filament	^4.0 \| ^5.0

Runtime JS Dependencies (bundled)

Package	Version	Purpose
`dayjs`	^1.11	Date manipulation
`@floating-ui/dom`	^1.6	Dropdown positioning
`imask`	^7.6	Input masking

🙏 Contributors

Thanks to all contributors who helped shape this release:

@ahmed-rashad-alnaggar — FilamentTimezone integration
@Youssef-Amjad — Laravel 13 support, version constraint fixes
@andreiio — Romanian translations
@tiagof — Portuguese translations
@juliangums — 12/24-hour format fix

Full Changelog: 4.0.9...5.0.0

malzariey/filament-daterangepicker-filter 5.0.0 v5.0.0 on PHP Packagist