patrickcurl / filament-flatpickr

The Popular Datetime, Flatpickr Picker as a Filament Form Field

Flatpickr Date/Time Picker as a Filament Field

Flatpickr is one of the most popular js datepickers. This filament plugin allows you to use flatpickr as a Filament Field without the sweat of configuration.

Features

• Configure easily using fluent (chained) methods
• Supports an optional month Selector
• Supports an optional week selector
• Support for both light and dark modes
• Specify the theme (among the available themes) as a configuration
• Supports Range Selection mode
• Supports multiple date selection mode
• And many more features are coming...

Installation

You can install the package via composer:

composer require savannabits/filament-flatpickr

You can publish the config file with:

php artisan vendor:publish --tag="filament-flatpickr-config"

This is the contents of the published config file:

return [
    'default_theme' => 'airbnb', // 'default','dark','material_blue','material_green','material_red','material_orange','airbnb','confetti'
];

If you are using a custom filament theme (using tailwind.config.js), append the following to tailwind.config.js under content for proper styling:

module.exports = {
    content: [
        ...,
        './vendor/savannabits/filament-flatpickr/**/*.blade.php', // <== Add this line
    ],

Usage

Use the Flatpickr field anywhere in your filament forms as shown in the following examples

use Savannabits\Flatpickr\Flatpickr;

// Basic, Date Field
Flatpickr::make('read_at')->default(now()),

// Datetime field
Flatpickr::make('read_at')->enableTime(),

// Month Selector field
Flatpickr::make('read_at')->monthSelect(),

// Date Range picker field
Flatpickr::make('read_at')->rangePicker(),

// Specify the Date format
Flatpickr::make('read_at')->dateFormat('Y-m-d'),

// Toggle AltInput (true by default) and set Alt Display Format:
Flatpickr::make('read_at')->altInput(true)->altFormat('F J Y'),

// Specify the input Date Format
Flatpickr::make('read_at')->dateFormat('d/m/Y')->altInput(false),

// Specify the Datepicker's Theme: See for https://flatpickr.js.org/themes/ available themes
Flatpickr::make('read_at')->theme('material_red'),

Automatic dark mode:

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Savannabits
• All Contributors

License

The MIT License (MIT). Please see License File for more information.