PHPackages safeer/date-range-picker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. safeer/date-range-picker ActiveLibrary[Utility & Helpers](/categories/utility) safeer/date-range-picker ======================== A Livewire-powered date range picker component 1.0.2(1y ago)11MITBladePHP ^8.2 Since May 17Pushed 1y ago1 watchersCompare [ Source](https://github.com/SafeerAhmFarooqi/date-range-picker)[ Packagist](https://packagist.org/packages/safeer/date-range-picker)[ RSS](/packages/safeer-date-range-picker/feed)WikiDiscussions master Synced today READMEChangelogDependencies (2)Versions (4)Used By (0) Laravel Date Range Picker ========================= [](#laravel-date-range-picker) A Livewire-powered date range picker component for Laravel applications, offering single- and multi-range selection, customizable hover data, dark mode, and easy formatting. Table of Contents ----------------- [](#table-of-contents) - [Requirements](#requirements) - [Installation](#installation) - [Publishing View](#publishing-view) - [Demo](#demo) - [Usage](#usage) - [Blade Integration](#blade-integration) - [Customization via Subclassing](#customization-via-subclassing) - [Generating New Pickers](#generating-new-pickers) - [Dark Mode](#dark-mode) - [Facade & Formatting](#facade--formatting) - [Troubleshooting](#troubleshooting) - [License](#license) --- Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 10+ - Livewire 3+ --- Installation ------------ [](#installation) Require the package via Composer: ``` composer require safeer/date-range-picker ``` The package’s service provider and facade alias will be auto-discovered thanks to PSR-4 & Laravel’s package discovery. Publishing View --------------- [](#publishing-view) To customize view used by the `saf:make-daterange-picker` command, publish it: ``` # Publish views php artisan vendor:publish \ --provider="Saf\DateRangePicker\DateRangePickerServiceProvider" \ --tag=views ``` This will copy: - **Views** → `resources/views/vendor/saf-date-range-picker` Demo ---- [](#demo) **Light Mode** [![Date Range Picker – Light Mode](screenshots/light-mode.png)](screenshots/light-mode.png) **Dark Mode** [![Date Range Picker – Dark Mode](screenshots/dark-mode.png)](screenshots/dark-mode.png) Usage ----- [](#usage) ### Blade Integration [](#blade-integration) ``` @livewireStyles @livewire('saf-date-range-picker', [ 'picker' => 'range', // 'single' or 'range' 'multiSelect' => true, // allow multiple ranges 'initialMonthYear' => now()->format('Y-m'), 'preOccupiedDates' => [ ['startDate' => '2025-06-01', 'endDate' => '2025-06-05'], ], 'disableDates' => [ ['startDate' => '2025-06-10'], ], 'darkMode' => false, ]) @livewireScripts ``` **Note:** The input field will bind to either `selectedDates` (single mode) or `selectedRanges` (range mode). ### Customization via Subclassing [](#customization-via-subclassing) Extend the base picker to override methods like `getLivewireHoverData()`: ``` namespace App\Livewire; use Saf\DateRangePicker\Livewire\DateRangePicker as BasePicker; class MyCustomPicker extends BasePicker { public function getLivewireHoverData($currentMonthYear) { return [ 1 => "First Day Hover Data for {$currentMonthYear}", 2 => "Second Day Hover Data for {$currentMonthYear}", ]; } } ``` Then in Blade: ``` @livewire('my-custom-picker', [ 'picker' => 'range', 'multiSelect' => true, 'initialMonthYear' => now()->format('Y-m'), 'preOccupiedDates' => [ ['startDate' => '2025-06-01', 'endDate' => '2025-06-05'], ], 'disableDates' => [ ['startDate' => '2025-06-10'], ], 'darkMode' => false, ]) ``` ### Generating New Pickers [](#generating-new-pickers) Use the `saf:make-daterange-picker` Artisan command: ``` php artisan saf:make-daterange-picker ReportDatePicker ``` This will scaffold a new class in `app/Livewire/ReportDatePicker.php` based on the published stub. By editing `/stubs/date-range-picker.stub` you can inject default methods (e.g., a pre-defined `getLivewireHoverData()`) into every newly generated picker. ### Dark Mode [](#dark-mode) Toggle dark styling by passing `darkMode => true`: ``` @livewire('saf-date-range-picker', [ 'darkMode' => true, ]) ``` Or control it dynamically by binding a boolean property from your parent component. Facade & Formatting ----------------------- [](#facade--formatting) Use the `DateRangeFormatter` facade to normalize user input: ``` use DateRangeFormatter; $raw = "2025-06-01,2025-06-05"; $norm = DateRangeFormatter::format($raw); // => "[2025-06-01, 2025-06-05]" ``` In a controller: ``` public function store(Request $request) { $value = DateRangeFormatter::format($request->input('date_range')); // Persist or process… } ``` Alternatively: - Resolve via container: `app('saf-date-range-formatter')->format($raw)` - Inject `Saf\DateRangePicker\Services\DateRangeFormatterService` in method signature. Troubleshooting --------------- [](#troubleshooting) - **Alpine `$wire` undefined:** Ensure you load `@livewireScripts` after any Alpine includes, and do not include Alpine twice. - **Multiple Alpine instances:** Remove duplicate Alpine `` tags. - **Stub changes not applied:** Clear `bootstrap/cache` or restart your server. - **Make sure Alpine isn't already installed** If the application you are using already has AlpineJS installed, you will need to remove it for Livewire to work properly; otherwise, Alpine will be loaded twice and Livewire won't function. For example, if you installed the Laravel Breeze "Blade with Alpine" starter kit, you will need to remove Alpine from `resources/js/app.js`. License ------- [](#license) The MIT License (MIT). See `LICENSE` for details ### Health Score 29 — LowBetter than 57% of packages Maintenance46 Moderate activity, may be stable Popularity3 Limited adoption so far Community7 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 412d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/90330142?v=4)[SafeerAhmFarooqi](/maintainers/SafeerAhmFarooqi)[@SafeerAhmFarooqi](https://github.com/SafeerAhmFarooqi) --- Top Contributors [![SafeerAhmFarooqi](https://avatars.githubusercontent.com/u/90330142?v=4)](https://github.com/SafeerAhmFarooqi "SafeerAhmFarooqi (6 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/safeer-date-range-picker/health.svg) ``` [![Health](https://phpackages.com/badges/safeer-date-range-picker/health.svg)](https://phpackages.com/packages/safeer-date-range-picker) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9527.8M128](/packages/livewire-flux)[jantinnerezo/livewire-alert This package provides a simple alert utilities for your livewire components. 8131.4M20](/packages/jantinnerezo-livewire-alert)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4911.6M11](/packages/leandrocfe-filament-apex-charts)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725172.4k14](/packages/tallstackui-tallstackui)[venturedrake/laravel-crm A free open source CRM built as a package for laravel projects 43311.1k](/packages/venturedrake-laravel-crm)[ramonrietdijk/livewire-tables Dynamic tables for models with Laravel Livewire 21259.6k](/packages/ramonrietdijk-livewire-tables) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)