PHPackages                             malzariey/filament-daterangepicker-filter - 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. malzariey/filament-daterangepicker-filter

ActiveLibrary[Utility & Helpers](/categories/utility)

malzariey/filament-daterangepicker-filter
=========================================

This package uses daterangepciker library to filter date by a range or predefined date ranges (Today , Yesterday ...etc)

5.0.6(3w ago)1772.3M↓36.5%8316MITJavaScriptCI passing

Since Mar 19Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/malzariey/filament-daterangepicker-filter)[ Packagist](https://packagist.org/packages/malzariey/filament-daterangepicker-filter)[ Docs](https://github.com/malzariey/filament-daterangepicker-filter)[ GitHub Sponsors](https://github.com/Malzariey)[ RSS](/packages/malzariey-filament-daterangepicker-filter/feed)WikiDiscussions x5 Synced 4d ago

READMEChangelog (10)Dependencies (18)Versions (88)Used By (16)

Filament Date Range Picker and Filter
=====================================

[](#filament-date-range-picker-and-filter)

[![Latest Version on Packagist](https://camo.githubusercontent.com/25f2dda6ce66e516e315f78d05e19b86ae0b6d414cc3ebc20a26eaca19a5aca9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d616c7a61726965792f66696c616d656e742d6461746572616e67657069636b65722d66696c7465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/malzariey/filament-daterangepicker-filter)[![Total Downloads](https://camo.githubusercontent.com/6d865bf3c510abd55e22e14e554af71679d666111eeba5725039ce8650ddd0cb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d616c7a61726965792f66696c616d656e742d6461746572616e67657069636b65722d66696c7465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/malzariey/filament-daterangepicker-filter)

A native Alpine.js date range picker for [Filament](https://filamentphp.com/). Select date ranges, months, or years with support for presets, time selection, and full modal/slide-over compatibility.

Features
--------

[](#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
------------

[](#installation)

```
composer require malzariey/filament-daterangepicker-filter
```

Publish translations (optional):

```
php artisan vendor:publish --tag="filament-daterangepicker-filter-translations"
```

Screenshots
-----------

[](#screenshots)

#### Light mode

[](#light-mode)

[![DateRangePicker Widget](art/light.png)](art/light.png)

#### Dark mode

[](#dark-mode)

[![DateRangePicker Widget](art/dark.png)](art/dark.png)

Basic Usage
-----------

[](#basic-usage)

### As a Field

[](#as-a-field)

```
use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('created_at'),
```

### As a Filter

[](#as-a-filter)

```
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at'),
```

---

Picker Type Modes
-----------------

[](#picker-type-modes)

### Day Picker (Default)

[](#day-picker-default)

Select specific dates:

```
DateRangePicker::make('date_range')
    ->format('d/m/Y');
```

### Month Picker

[](#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.

```
use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('billing_period')
    ->monthPicker()
    ->format('F Y');
```

Month picker mode also supports typed input. Pressing Enter applies the typed month value without falling through to day-picker selection behavior:

```
DateRangePicker::make('billing_period')
    ->monthPicker()
    ->singleCalendar()
    ->allowInput()
    ->format('m/Y');
```

Range input works with the configured separator:

```
DateRangePicker::make('billing_period')
    ->monthPicker()
    ->allowInput()
    ->format('m/Y');
```

Example input:

```
06/2026 - 08/2026

```

Month picker year options and disabled months respect `minYear()`, `maxYear()`, `minDate()`, and `maxDate()`:

```
DateRangePicker::make('billing_period')
    ->monthPicker()
    ->format('m/Y')
    ->minYear(2020)
    ->maxYear(2030)
    ->minDate('2020-06-01')
    ->maxDate('2030-12-31');
```

### Year Picker

[](#year-picker)

Select entire years:

```
DateRangePicker::make('fiscal_years')
    ->yearPicker()
    ->format('Y')
    ->minYear(2020)
    ->maxYear(2030);
```

---

New Features
------------

[](#new-features)

### Keyboard Input

[](#keyboard-input)

Allow users to type dates directly:

```
DateRangePicker::make('dates')
    ->allowInput(); // Enable keyboard entry with format validation
```

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

[](#modal--slide-over-compatibility)

The dropdown teleports to `` by default to avoid z-index issues:

```
DateRangePicker::make('dates')
    ->teleport();      // Enabled by default

DateRangePicker::make('dates')
    ->teleport(false); // Disable if needed
```

### Dual State Mode

[](#dual-state-mode)

Store start and end dates in separate Livewire properties:

```
DateRangePicker::make('date_range')
    ->useDualState('start_date', 'end_date');

// In your Livewire component:
public ?string $start_date = null;
public ?string $end_date = null;
```

---

Custom Events
-------------

[](#custom-events)

The component dispatches custom events for integration with Livewire or JavaScript:

```
// Listen for date range changes
document.addEventListener('apply.daterangepicker', (e) => {
    console.log('Start:', e.detail.startDate);
    console.log('End:', e.detail.endDate);
    console.log('Formatted:', e.detail.formattedValue);
});

// Other available events
document.addEventListener('cancel.daterangepicker', (e) => { /* ... */ });
document.addEventListener('show.daterangepicker', (e) => { /* ... */ });
document.addEventListener('hide.daterangepicker', (e) => { /* ... */ });
```

EventFired 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
---------------------

[](#configuration-options)

### Timezone

[](#timezone)

```
DateRangePicker::make('created_at')->timezone('UTC')
```

### Start and End Dates

[](#start-and-end-dates)

```
DateRangePicker::make('created_at')
    ->startDate(Carbon::now())
    ->endDate(Carbon::now())

// Or use shortcuts:
DateRangePicker::make('created_at')->defaultToday()
DateRangePicker::make('created_at')->defaultLast7Days()
DateRangePicker::make('created_at')->defaultThisMonth()
DateRangePicker::make('created_at')->defaultLastYear()
```

### Min and Max Dates

[](#min-and-max-dates)

```
DateRangePicker::make('created_at')
    ->minDate(Carbon::now()->subMonth())
    ->maxDate(Carbon::now()->addMonth())
```

### First Day of Week

[](#first-day-of-week)

```
DateRangePicker::make('created_at')->firstDayOfWeek(1) // Monday
```

### Time Picker

[](#time-picker)

```
DateRangePicker::make('created_at')
    ->timePicker()
    ->timePicker24()       // Use 24-hour format
    ->timePickerSecond()   // Show seconds
    ->timePickerIncrement(30) // 30-minute increments
```

### Auto Apply

[](#auto-apply)

```
DateRangePicker::make('created_at')->autoApply()
```

### Single Calendar

[](#single-calendar)

```
DateRangePicker::make('created_at')->singleCalendar()
```

### Disabled Dates

[](#disabled-dates)

```
DateRangePicker::make('created_at')
    ->disabledDates(['2024-12-25', '2024-12-26'])
```

### Display Format

[](#display-format)

Use PHP [Carbon date format](https://www.php.net/manual/en/datetime.format.php) tokens. The JavaScript display format is auto-converted:

```
DateRangePicker::make('created_at')
    ->format('d/m/Y')      // Renders as DD/MM/YYYY in the browser

DateRangePicker::make('created_at')
    ->format('Y-m-d')      // Renders as YYYY-MM-DD in the browser

DateRangePicker::make('created_at')
    ->format('d M Y')      // Renders as DD MMM YYYY in the browser
```

> **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

[](#predefined-ranges)

```
DateRangePicker::make('created_at')
    ->ranges([
        'Today' => [now(), now()],
        'This Week' => [now()->startOfWeek(), now()->endOfWeek()],
        'Last 30 Days' => [now()->subDays(30), now()],
    ])
```

### Use Range Labels

[](#use-range-labels)

Display preset labels instead of dates:

```
DateRangePicker::make('created_at')->useRangeLabels()
```

### Disable Custom Range Selection

[](#disable-custom-range-selection)

```
DateRangePicker::make('created_at')->disableCustomRange()
```

### Drop and Open Directions

[](#drop-and-open-directions)

```
use Malzariey\FilamentDaterangepickerFilter\Enums\DropDirection;
use Malzariey\FilamentDaterangepickerFilter\Enums\OpenDirection;

DateRangePicker::make('created_at')
    ->drops(DropDirection::UP)
    ->opens(OpenDirection::CENTER)
```

### Max Span

[](#max-span)

```
DateRangePicker::make('created_at')
    ->maxSpan(['months' => 1]) // days, months, or years
```

### Week Numbers

[](#week-numbers)

```
DateRangePicker::make('created_at')
    ->showWeekNumbers()     // Localized week numbers
    ->showISOWeekNumbers()  // ISO week numbers
```

### Day Picker Month/Year Dropdowns

[](#day-picker-monthyear-dropdowns)

Use `showDropdowns()` to show month and year dropdowns in the day picker header:

```
DateRangePicker::make('created_at')
    ->showDropdowns()
    ->minYear(2000)
    ->maxYear(2030)
```

Month picker mode always shows its own numeric year input in the popup header and uses the same year/date constraints.

---

Filter Options
--------------

[](#filter-options)

### Custom Query

[](#custom-query)

```
use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')
    ->modifyQueryUsing(fn(Builder $query, ?Carbon $startDate, ?Carbon $endDate, $dateString) =>
        $query->when(!empty($dateString),
            fn(Builder $query) => $query->whereBetween('created_at', [$startDate, $endDate])
        )
    )
```

### Filter Indicator

[](#filter-indicator)

```
DateRangeFilter::make('created_at')->withIndicator()
```

---

Migration from v3.x and v4.x
----------------------------

[](#migration-from-v3x-and-v4x)

### Breaking Changes

[](#breaking-changes)

1. **jQuery/Moment.js removed** - The component now uses Alpine.js and Day.js
2. **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

[](#new-methods)

MethodDescription`->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-methods)

Deprecated MethodReplacementSince`->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
-------

[](#credits)

- [Majid Al-Zariey](https://github.com/malzariey)
- [All Contributors](https://github.com/malzariey/filament-daterangepicker-filter/graphs/contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](https://github.com/malzariey/filament-daterangepicker-filter/blob/main/LICENSE.md) for more information.

Acknowledgements
----------------

[](#acknowledgements)

- Built with [Alpine.js](https://alpinejs.dev/), [Day.js](https://day.js.org/), and [Floating UI](https://floating-ui.com/)
- Special thanks to [JetBrains](https://www.jetbrains.com) for their support of open-source projects

###  Health Score

66

—

FairBetter than 99% of packages

Maintenance93

Actively maintained with recent releases

Popularity62

Solid adoption and visibility

Community41

Growing community involvement

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 65.4% 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 ~14 days

Recently: every ~1 days

Total

81

Last Release

24d ago

Major Versions

1.3.2 → 2.02023-08-04

2.8.0 → 3.0.02024-08-02

3.4.3 → 4.0.62025-08-14

4.0.9 → 5.0.02026-04-02

### Community

Maintainers

![](https://www.gravatar.com/avatar/94e7a69eedc06b2f4531e69ca24c2d6752fa8b1cd0a29ddd465a91dec5d7eeaa?d=identicon)[malzariey](/maintainers/malzariey)

---

Top Contributors

[![malzariey](https://avatars.githubusercontent.com/u/35528749?v=4)](https://github.com/malzariey "malzariey (195 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (16 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (11 commits)")[![noxoua](https://avatars.githubusercontent.com/u/142592979?v=4)](https://github.com/noxoua "noxoua (11 commits)")[![underdpt](https://avatars.githubusercontent.com/u/8122137?v=4)](https://github.com/underdpt "underdpt (7 commits)")[![datlechin](https://avatars.githubusercontent.com/u/56961917?v=4)](https://github.com/datlechin "datlechin (4 commits)")[![buddhaCode](https://avatars.githubusercontent.com/u/11678100?v=4)](https://github.com/buddhaCode "buddhaCode (3 commits)")[![madsem](https://avatars.githubusercontent.com/u/3166991?v=4)](https://github.com/madsem "madsem (3 commits)")[![juliangums](https://avatars.githubusercontent.com/u/22907521?v=4)](https://github.com/juliangums "juliangums (3 commits)")[![husam-tariq](https://avatars.githubusercontent.com/u/16601695?v=4)](https://github.com/husam-tariq "husam-tariq (3 commits)")[![Youssef-Amjad](https://avatars.githubusercontent.com/u/84003772?v=4)](https://github.com/Youssef-Amjad "Youssef-Amjad (2 commits)")[![ahmed-rashad-alnaggar](https://avatars.githubusercontent.com/u/131385452?v=4)](https://github.com/ahmed-rashad-alnaggar "ahmed-rashad-alnaggar (2 commits)")[![andreiio](https://avatars.githubusercontent.com/u/1569300?v=4)](https://github.com/andreiio "andreiio (2 commits)")[![corean](https://avatars.githubusercontent.com/u/225376?v=4)](https://github.com/corean "corean (2 commits)")[![holmesadam](https://avatars.githubusercontent.com/u/11541764?v=4)](https://github.com/holmesadam "holmesadam (2 commits)")[![HomaEEE](https://avatars.githubusercontent.com/u/1429343?v=4)](https://github.com/HomaEEE "HomaEEE (2 commits)")[![irfanm96](https://avatars.githubusercontent.com/u/42065936?v=4)](https://github.com/irfanm96 "irfanm96 (2 commits)")[![kenng](https://avatars.githubusercontent.com/u/6687538?v=4)](https://github.com/kenng "kenng (2 commits)")[![piotrdobrzynski](https://avatars.githubusercontent.com/u/50482622?v=4)](https://github.com/piotrdobrzynski "piotrdobrzynski (2 commits)")[![wit3](https://avatars.githubusercontent.com/u/5450259?v=4)](https://github.com/wit3 "wit3 (2 commits)")

---

Tags

laravelMalzarieyfilament-daterangepicker-filter

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/malzariey-filament-daterangepicker-filter/health.svg)

```
[![Health](https://phpackages.com/badges/malzariey-filament-daterangepicker-filter/health.svg)](https://phpackages.com/packages/malzariey-filament-daterangepicker-filter)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-debugger

About

104162.2k2](/packages/stephenjude-filament-debugger)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329530.5k29](/packages/codewithdennis-filament-select-tree)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

122177.8k1](/packages/stephenjude-filament-feature-flags)[finity-labs/fin-mail

A powerful email template manager and composer for Filament with dynamic token replacement, template versioning, and inline email sending.

284.5k1](/packages/finity-labs-fin-mail)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)