PHPackages                             citricguy/filament-flatpickr - 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. citricguy/filament-flatpickr

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

citricguy/filament-flatpickr
============================

Integration for Filament with Flatpickr as a field.

v1.3.0(1mo ago)038[2 PRs](https://github.com/citricguy/filament-flatpickr/pulls)MITPHPPHP ^8.3CI passing

Since Dec 23Pushed 1mo agoCompare

[ Source](https://github.com/citricguy/filament-flatpickr)[ Packagist](https://packagist.org/packages/citricguy/filament-flatpickr)[ Docs](https://github.com/citricguy/filament-flatpickr)[ GitHub Sponsors](https://github.com/citricguy)[ RSS](/packages/citricguy-filament-flatpickr/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (34)Versions (12)Used By (0)

Filament Flatpickr
==================

[](#filament-flatpickr)

[![Latest Version on Packagist](https://camo.githubusercontent.com/608f2741d5494b458380d4a894898f8d5642e9ba9ca51c219d0c3a911fab43e1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6369747269636775792f66696c616d656e742d666c61747069636b722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/citricguy/filament-flatpickr)[![GitHub Tests Action Status](https://camo.githubusercontent.com/3dc0c80dd60031918ab51573dd4cb4ca8dc6e3f4c5b16efa7ea3d14b6f5df5bc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6369747269636775792f66696c616d656e742d666c61747069636b722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/citricguy/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/5a28626067f4343abfea0a1bab6cd92f2e2a9364d5833545da7a81698477bd38/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6369747269636775792f66696c616d656e742d666c61747069636b722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/citricguy/filament-flatpickr/actions?query=workflow%3A%22Fix+PHP+Code+Styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/0b0b1fdfb577d6fee878bd8fbd827e794bd885047cd2f2054a14dbf92f3de2f4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6369747269636775792f66696c616d656e742d666c61747069636b722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/citricguy/filament-flatpickr)

A powerful Flatpickr date/time picker integration for Filament v4 and v5. Features timezone handling, date ranges, multiple date selection, time slots, business hours, and 9 built-in themes.

> Note: This project was heavily inspired by . It was developed as a ground-up alternative with a focus on current Laravel and Filament versions and tailored Filament integration. Many thanks to the original project for the ideas and motivation.

Requirements
------------

[](#requirements)

- PHP 8.3+
- Laravel 12+
- Laravel 13+
- Laravel 11 best-effort compatibility
- Filament v4 or v5
- Livewire 3 or 4

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require citricguy/filament-flatpickr
```

Publish the assets (required):

```
php artisan filament:assets
```

Quick Start
-----------

[](#quick-start)

```
use Citricguy\FilamentFlatpickr\Forms\Components\Flatpickr;

Flatpickr::make('published_at')
    ->dateTime()
```

Available Components
--------------------

[](#available-components)

The package provides one main component with three convenience wrappers:

ComponentDescription`Flatpickr`Full-featured base component`FlatpickrDatePicker`Pre-configured date-only picker`FlatpickrTimePicker`Pre-configured time-only picker`FlatpickrDateTimePicker`Pre-configured date+time picker```
use Citricguy\FilamentFlatpickr\Forms\Components\FlatpickrDatePicker;
use Citricguy\FilamentFlatpickr\Forms\Components\FlatpickrTimePicker;
use Citricguy\FilamentFlatpickr\Forms\Components\FlatpickrDateTimePicker;

FlatpickrDatePicker::make('birth_date')

FlatpickrTimePicker::make('alarm_time')

FlatpickrDateTimePicker::make('appointment_at')
```

Selection Modes
---------------

[](#selection-modes)

### Date Only

[](#date-only)

```
Flatpickr::make('date')
    ->dateOnly()
```

### Time Only

[](#time-only)

```
Flatpickr::make('time')
    ->timeOnly()
```

### Date and Time

[](#date-and-time)

```
Flatpickr::make('datetime')
    ->dateTime()
```

### Date Range

[](#date-range)

Select a start and end date:

```
Flatpickr::make('vacation')
    ->range()
```

For storing start/end dates in separate database columns:

```
Flatpickr::make('vacation')
    ->range()
    ->dualStatePaths('vacation_start', 'vacation_end')
```

### Multiple Dates

[](#multiple-dates)

Select multiple individual dates:

```
Flatpickr::make('blocked_dates')
    ->multiple()
```

Time Configuration
------------------

[](#time-configuration)

### 24-Hour Format

[](#24-hour-format)

```
Flatpickr::make('time')
    ->timeOnly()
    ->time24hr()
```

### Include Seconds

[](#include-seconds)

```
Flatpickr::make('precise_time')
    ->timeOnly()
    ->seconds()
```

### Time Increments

[](#time-increments)

```
Flatpickr::make('appointment')
    ->dateTime()
    ->hourIncrement(1)
    ->minuteIncrement(15)
```

### Business Hours

[](#business-hours)

Restrict selection to business hours (validation enforced):

```
Flatpickr::make('meeting')
    ->dateTime()
    ->businessHours('09:00', '17:00')
```

### Time Slots

[](#time-slots)

Enforce fixed time slot intervals:

```
Flatpickr::make('appointment')
    ->dateTime()
    ->useTimeSlots()
    ->timeSlotDurationMinutes(30)
```

### Default Time

[](#default-time)

Set default hour and minute when opening the picker:

```
Flatpickr::make('start_time')
    ->dateTime()
    ->defaultHour(9)
    ->defaultMinute(0)
```

Date Constraints
----------------

[](#date-constraints)

### Minimum and Maximum Dates

[](#minimum-and-maximum-dates)

```
Flatpickr::make('future_date')
    ->dateOnly()
    ->minDate(now())
    ->maxDate(now()->addYear())
```

### Date Restrictions

[](#date-restrictions)

```
use Citricguy\FilamentFlatpickr\Enums\DateRestriction;

// No past dates
Flatpickr::make('future_event')
    ->dateOnly()
    ->dateRestriction(DateRestriction::NoPast)

// No future dates
Flatpickr::make('birth_date')
    ->dateOnly()
    ->dateRestriction(DateRestriction::NoFuture)
```

### Disable Specific Weekdays

[](#disable-specific-weekdays)

```
// Disable weekends (0 = Sunday, 6 = Saturday)
Flatpickr::make('business_day')
    ->dateOnly()
    ->disabledWeekdays([0, 6])
```

### Exclude Specific Dates

[](#exclude-specific-dates)

```
Flatpickr::make('available_date')
    ->dateOnly()
    ->excludedDates(['2025-12-25', '2025-01-01'])
```

Range Duration Constraints
--------------------------

[](#range-duration-constraints)

For range mode, constrain the minimum and maximum duration:

```
Flatpickr::make('rental_period')
    ->range()
    ->minRangeMinutes(60 * 24)      // Minimum 1 day
    ->maxRangeMinutes(60 * 24 * 14) // Maximum 14 days
```

Timezone Handling
-----------------

[](#timezone-handling)

### Display and Storage Timezones

[](#display-and-storage-timezones)

```
Flatpickr::make('event_at')
    ->dateTime()
    ->displayTimezone('America/New_York')
    ->storageTimezone('UTC')
```

### Timezone Modes

[](#timezone-modes)

```
use Citricguy\FilamentFlatpickr\Enums\TimezoneMode;

// Use app's default timezone
Flatpickr::make('event_at')
    ->timezoneMode(TimezoneMode::LocationDefault)

// Use a fixed timezone
Flatpickr::make('event_at')
    ->timezoneMode(TimezoneMode::Fixed)
    ->displayTimezone('Europe/London')

// Detect user's browser timezone
Flatpickr::make('event_at')
    ->timezoneMode(TimezoneMode::Submitter)
```

Formats
-------

[](#formats)

### Storage Format

[](#storage-format)

The format used when saving to the database:

```
Flatpickr::make('date')
    ->format('Y-m-d H:i:s')
```

Default formats by mode:

- Date only: `Y-m-d`
- Time only: `H:i:s`
- DateTime: `Y-m-d H:i:s`

### Display Format

[](#display-format)

The format shown to the user (uses [Flatpickr tokens](https://flatpickr.js.org/formatting/)):

```
Flatpickr::make('date')
    ->displayFormat('F j, Y')
    ->useAltInput()
```

Appearance
----------

[](#appearance)

### Themes

[](#themes)

```
use Citricguy\FilamentFlatpickr\Enums\FlatpickrTheme;

Flatpickr::make('date')
    ->theme(FlatpickrTheme::Dark)
```

Available themes:

- `Default`
- `Airbnb`
- `Confetti`
- `Dark`
- `Light`
- `MaterialBlue`
- `MaterialGreen`
- `MaterialOrange`
- `MaterialRed`

### Position

[](#position)

```
use Citricguy\FilamentFlatpickr\Enums\FlatpickrPosition;

Flatpickr::make('date')
    ->position(FlatpickrPosition::AboveRight)
```

Available positions: `Auto`, `Above`, `Below`, `AutoLeft`, `AutoCenter`, `AutoRight`, `AboveLeft`, `AboveCenter`, `AboveRight`, `BelowLeft`, `BelowCenter`, `BelowRight`

### Inline Calendar

[](#inline-calendar)

Display the calendar inline (always visible):

```
Flatpickr::make('date')
    ->inline()
```

### Show Multiple Months

[](#show-multiple-months)

```
Flatpickr::make('date_range')
    ->range()
    ->showMonths(2)
```

### Week Numbers

[](#week-numbers)

```
Flatpickr::make('date')
    ->weekNumbers()
```

UI Options
----------

[](#ui-options)

### Allow Manual Input

[](#allow-manual-input)

```
Flatpickr::make('date')
    ->allowInput()
```

### Disable Mobile Native Picker

[](#disable-mobile-native-picker)

```
Flatpickr::make('date')
    ->disableMobile()
```

### Disable Click to Open

[](#disable-click-to-open)

```
Flatpickr::make('date')
    ->clickOpens(false)
```

### Close on Select

[](#close-on-select)

```
Flatpickr::make('date')
    ->closeOnSelect(false) // Keep open after selection
```

Prefixes and Suffixes
---------------------

[](#prefixes-and-suffixes)

Works with Filament's standard affix system:

```
Flatpickr::make('date')
    ->prefixIcon('heroicon-o-calendar')
    ->suffixIcon('heroicon-o-clock')
```

Localization
------------

[](#localization)

```
Flatpickr::make('date')
    ->locale('fr')
```

Flatpickr supports [40+ locales](https://flatpickr.js.org/localization/).

Livewire Event Hooks
--------------------

[](#livewire-event-hooks)

Emit Livewire events when the picker state changes:

```
Flatpickr::make('date')
    ->emitOnChange('dateSelected', ['dateStr', 'selectedDates'])
    ->emitOnOpen('pickerOpened')
    ->emitOnClose('pickerClosed')
```

Listen in your Livewire component:

```
#[On('dateSelected')]
public function handleDateChange(string $dateStr, array $selectedDates): void
{
    // Handle the event
}
```

Enums Reference
---------------

[](#enums-reference)

### FlatpickrMode

[](#flatpickrmode)

```
use Citricguy\FilamentFlatpickr\Enums\FlatpickrMode;

FlatpickrMode::Single   // Default single date/time
FlatpickrMode::Range    // Date range selection
FlatpickrMode::Multiple // Multiple date selection
```

### FlatpickrTheme

[](#flatpickrtheme)

```
use Citricguy\FilamentFlatpickr\Enums\FlatpickrTheme;

FlatpickrTheme::Default
FlatpickrTheme::Airbnb
FlatpickrTheme::Confetti
FlatpickrTheme::Dark
FlatpickrTheme::Light
FlatpickrTheme::MaterialBlue
FlatpickrTheme::MaterialGreen
FlatpickrTheme::MaterialOrange
FlatpickrTheme::MaterialRed
```

### FlatpickrPosition

[](#flatpickrposition)

```
use Citricguy\FilamentFlatpickr\Enums\FlatpickrPosition;

FlatpickrPosition::Auto
FlatpickrPosition::Above
FlatpickrPosition::Below
FlatpickrPosition::AutoLeft
FlatpickrPosition::AutoCenter
FlatpickrPosition::AutoRight
FlatpickrPosition::AboveLeft
FlatpickrPosition::AboveCenter
FlatpickrPosition::AboveRight
FlatpickrPosition::BelowLeft
FlatpickrPosition::BelowCenter
FlatpickrPosition::BelowRight
```

### DateRestriction

[](#daterestriction)

```
use Citricguy\FilamentFlatpickr\Enums\DateRestriction;

DateRestriction::None     // No restriction
DateRestriction::NoPast   // Disable past dates
DateRestriction::NoFuture // Disable future dates
```

### TimezoneMode

[](#timezonemode)

```
use Citricguy\FilamentFlatpickr\Enums\TimezoneMode;

TimezoneMode::LocationDefault // Use app timezone
TimezoneMode::Fixed           // Use specified timezone
TimezoneMode::Submitter       // Detect browser timezone
```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Josh Sommers](https://github.com/citricguy)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

45

—

FairBetter than 92% of packages

Maintenance97

Actively maintained with recent releases

Popularity10

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 90.9% 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 ~11 days

Recently: every ~22 days

Total

9

Last Release

46d ago

PHP version history (2 changes)v1.0.0PHP ^8.3|^8.4

v1.1.0PHP ^8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/303dc722529998132b7d250f65dc848fc4ee7c6718639ebfbc3098555b1efcd1?d=identicon)[citricguy](/maintainers/citricguy)

---

Top Contributors

[![citricguy](https://avatars.githubusercontent.com/u/3614402?v=4)](https://github.com/citricguy "citricguy (20 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)")

---

Tags

laravelfilament-flatpickrcitricguy

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/citricguy-filament-flatpickr/health.svg)

```
[![Health](https://phpackages.com/badges/citricguy-filament-flatpickr/health.svg)](https://phpackages.com/packages/citricguy-filament-flatpickr)
```

###  Alternatives

[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

33184.7k6](/packages/schmeits-filament-character-counter)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[defstudio/filament-searchable-input

A searchable autocomplete input for Filament forms

3212.4k](/packages/defstudio-filament-searchable-input)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice

Customize the livewire expiration notice

9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

6292.3k1](/packages/hydrat-filament-table-layout-toggle)

PHPackages © 2026

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