Skip to content

The Popular Datetime, Flatpickr Picker as a Filament Form Field

License

Notifications You must be signed in to change notification settings

buusing/filament-flatpickr

 
 

Repository files navigation

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.

About

The Popular Datetime, Flatpickr Picker as a Filament Form Field

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 82.4%
  • Blade 16.6%
  • JavaScript 1.0%