packagist malzariey/filament-daterangepicker-filter 4.1.beta.1
4.1.beta

2 days ago

Release v4.1.beta

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.

๐ŸŒŸ Highlights

  • Total Rewrite: Replaced the legacy jQuery & Moment.js plugin with a native Alpine.js & Day.js implementation.
  • Improved Performance: Significantly lighter bundle size and faster rendering.
  • Native Reactivity: Seamless integration with Livewire via Alpine.js state management.
  • Better Positioning: Implemented Floating UI for robust and accessible dropdown positioning.

โš ๏ธ Breaking Changes

  • Dependencies Removed: jquery, moment, and the legacy daterangepicker.js file have been removed.
  • Asset Changes: The main JS entry point is now resources/js/filament-daterangepicker.js.
  • Event Handling: jQuery events ($('#picker').on('apply.daterangepicker', ...)) are no longer supported. Use native event listeners or Alpine.js bindings.

๐Ÿš€ New Features

1. Modern Event Dispatching

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.

2. Enhanced Time Picker

  • True Sync: Time changes are now immediately reflected in the underlying date objects.
  • Seconds Support: fully supported in 12h and 24h modes.

3. Developer Experience

  • Debounced Sync: Prevents aggressive Livewire roundtrips during rapid date selection.
  • Memory Safety: extensive cleanup of event listeners and observers to prevent memory leaks in SPA environments.

๐Ÿงช Testing

This release is backed by a comprehensive new test suite:

  • Unit Tests: 100% coverage of core logic via Vitest.
  • E2E Tests: Automated browser verification via Playwright.
  • Browser Tested: Verified across 18+ configuration scenarios (Ranges, Limits, Masks, Localization).

๐Ÿ“ฆ Installation / Upgrade

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.

Don't miss a new filament-daterangepicker-filter release

NewReleases is sending notifications on new releases.