Documentation

• Flatpickr Date/Time Picker as a Filament Field
  • Features
  • Installation
  • Usage
  • Automatic dark mode:
  • Testing
  • Changelog
  • Contributing
  • Security Vulnerabilities
  • Credits
  • License

#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.