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

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

bobimicroweber/filament-flatpickr
=================================

Integrate Flatpickr with FilamentPHP

3.2(1y ago)019.7k—0%MITPHP

Since Aug 14Pushed 1y agoCompare

[ Source](https://github.com/bobimicroweber/filament-flatpickr)[ Packagist](https://packagist.org/packages/bobimicroweber/filament-flatpickr)[ Docs](https://github.com/bobimicroweber/filament-flatpickr)[ RSS](/packages/bobimicroweber-filament-flatpickr/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

 [![Tests](https://camo.githubusercontent.com/1e60857a1fac246cbf866118d7f877e8ad25655e8aeecfa817d53a2303255319/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f626f62696d6963726f77656265722f66696c616d656e742d6d6f64756c65732f72756e2d74657374732e796d6c3f6272616e63683d332e78266c6162656c3d7465737473267374796c653d666f722d7468652d6261646765266c6f676f3d676974687562)](https://github.com/bobimicroweber/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3A3.x) [![Styling](https://camo.githubusercontent.com/635cde35102d2a73702cedd222cff98492925e6aef5422ac460226acdf0d4af2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f626f62696d6963726f77656265722f66696c616d656e742d6d6f64756c65732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d332e78266c6162656c3d636f64652532307374796c65267374796c653d666f722d7468652d6261646765266c6f676f3d676974687562)](https://github.com/bobimicroweber/filament-flatpickr/actions?query=workflow%fix-php-code-style-issues+branch%3A3.x) [![Laravel v9.x](https://camo.githubusercontent.com/25242f3980f58cac4761477eeb8aaf08f483af9313019d7df7bc07fc42deea69/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d76392e782d4646324432303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c)](https://laravel.com) [![Filament v3.x](https://camo.githubusercontent.com/2ebf8f5d8381f8180a10747d9a977f96929a05ce46dec64650368bfff20e26f7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e745048502d76332e782d4642373041393f7374796c653d666f722d7468652d6261646765266c6f676f3d66696c616d656e74)](https://filamentphp.com) [![PHP 8.1](https://camo.githubusercontent.com/f828b436a9f10bce9f30864883ab5b07c5f9bd5e21bf275312ad61f37dedce3b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312d3737374242343f7374796c653d666f722d7468652d6261646765266c6f676f3d706870)](https://php.net) [![Packagist](https://camo.githubusercontent.com/7acdfb4bdfe1811a646ca10e645a2dd71a560ecbc8640e1b4d3a36169e5bb44d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f626f62696d6963726f77656265722f66696c616d656e742d666c61747069636b722e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d636f756e74)](https://packagist.org/packages/bobimicroweber/filament-flatpickr)

Use **[Flatpickr](https://flatpickr.js.org/)** as your datepicker in the Filament Forms and Panels.

**NB: These docs are for v3.x, which only supports Filament 3.x. For Filament v2 users, [use this guide instead](https://github.com/bobimicroweber/filament-flatpickr/tree/main)**

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

[](#installation)

Install the package via composer:

```
composer require bobimicroweber/flatpickr
```

Next, Run the `filament:assets` command to ensure the package's assets are published:

```
php artisan filament:assets
```

You may optionally publish the package's config file with the following command:

```
php artisan vendor:publish --tag="bobimicroweber-flatpickr-config"
```

Usage
-----

[](#usage)

You can do a lot with just one Component: `Flatpickr`You can use the Flatpickr component from this package as:

- DatePicker
- TimePicker
- DateTimePicker
- Range Picker
- Week Picker,
- Multiple-Date Picker
- Month Picker

Most of the fluent config methods are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming. The rest of the configuration is similar to a normal Filament `TextInput`.

Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations.

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

// Basic, Date Field
Flatpickr::make('test_field') // Minimal Config as a datepicker
Flatpickr::make('test_field')
    ->allowInput() // Allow a user to manually input the date in the textbox (make the textbox editable)
    ->altInput(true) // Enable the use of Alternative Input (See Flatpickr docs)
    ->altFormat('F j, Y') // Alternative input format
    ->enableTime() // Turn this into a DateTimePicker
    ->disabledDates(['2023-07-25','2023-07-26']) // Disable specific dates from being selected.
    ->minDate(today()->startOfYear()) // Set the minimum allowed date
    ->maxDate(today()) // Set the maximum allowed date.
    ->minTime(now()->format('H:i:s')) // Set the minimum allowed time
    ->maxTime(now()->addHours(12)->format('H:i:s')) // Set the maximum allowed time
    ->hourIncrement(1) // Intervals of incrementing hours in a time picker
    ->minuteIncrement(10) // Intervals of minute increment in a time picker
    ->enableSeconds(false) // Enable seconds in a time picker
    ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected
    ->defaultMinute(00) // Initial value of the minutes element, when no date is selected
    ->allowInvalidPreload() // Initially check if the selected date is valid
    ->altInputClass('sample-class') // Add a css class for the alt input format
    ->animate() // Animate transitions in the datepicker.
    ->dateFormat('Y-m-d') // Set the main date format
    ->ariaDateFormat('Y-m-d') // Aria
    ->clickOpens(true) // Open the datepicker when the input is clicked.
    ->closeOnSelect(true) // Close the datepicker once the date is selected.
    ->conjunction(',') // Applicable only for the MultiDatePicker: Separate inputs using this conjunction. The package will use this conjunction to explode the inputs to an array.
    ->inline(true) // Display the datepicker inline with the input, instead of using a popover.
    ->disableMobile(true) // Disable mobile-version of the datepicker on mobile devices.
    ->theme(\BobiMicroweber\FilamentFlatpickr\Enums\FlatpickrTheme::AIRBNB) // Set the datepicker theme (applies for all the date-pickers in the current page). For type sanity, Checkout the FlatpickrTheme enum class for a list of allowed themes.
    ->mode(\BobiMicroweber\FilamentFlatpickr\Enums\FlatpickrMode::RANGE) // Set the mode as single, range or multiple. Alternatively, you can just use ->range() or ->multiple()
    ->monthSelectorType(\BobiMicroweber\FilamentFlatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN)
    ->shorthandCurrentMonth(true)
    ->nextArrow('>')
    ->prevArrow('