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
License
The MIT License (MIT). Please see License File for more information.
84 Jan 7, 2023
62 Dec 31, 2022
3 Mar 5, 2022
11 Sep 10, 2022
41 Dec 24, 2022
6 Aug 4, 2022
622 Jan 2, 2023
11 Oct 13, 2020
2 Dec 7, 2021
5 Apr 2, 2022
3 Sep 25, 2022
39 Dec 21, 2022
69 Jan 4, 2023