• Flatpickr

Flatpickr

Plugin information

by Samson Maosa

Field Form builder

The Popular Date/time Picker, Flatpickr, as a Filament Form Field

Support

#flatpickr on Discord

Views

3796

License

MIT

Documentation

Flatpickr Date/Time Picker as a Filament Field

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

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.

image image

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()),

image

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

image

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

image

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

image

// 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'),

image

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

image

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

image

Automatic dark mode:

image

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

License

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