diff --git a/README.md b/README.md index 7b3735d..d62a4e9 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,30 @@ +

+ Tests + Styling + Laravel v9.x + Filament v2.x + PHP 8.1 + Packagist +

-# Flatpickr Date/Time Picker as a Filament Field +Use **[Flatpickr](https://flatpickr.js.org/)** as your date picker in your Filament Forms and Panels. -[![Latest Version on Packagist](https://img.shields.io/packagist/v/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr) -[![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/run-tests?label=tests)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain) -[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/Fix%20PHP%20code%20style%20issues?label=code%20style)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3Amain) -[![Total Downloads](https://img.shields.io/packagist/dt/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr) - -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](https://user-images.githubusercontent.com/5610289/183527622-4d26a2cb-ed8b-46d6-ba57-08aeeccdd7d6.png) -![image](https://user-images.githubusercontent.com/5610289/183527983-17401461-a1eb-4ba4-a83e-d65b267b8a7d.png) - -## 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... +**NB: These docs are for v2.x, which only supports Filament 2.x. Support for Filament 3.x is still under development** ## Installation -You can install the package via composer: +Install the package via composer: ```bash composer require savannabits/filament-flatpickr ``` -You can publish the config file with: +Next, publish the package's assets with the following command: ```bash -php artisan vendor:publish --tag="filament-flatpickr-config" +php artisan vendor:publish --tag="filament-flatpickr-assets" --force ``` -This is the contents of the published config file: - -```php -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: ```js module.exports = { @@ -52,54 +35,62 @@ module.exports = { ``` ## Usage -Use the `Flatpickr` field anywhere in your filament forms as shown in the following examples -```php -use Savannabits\Flatpickr\Flatpickr; - -// Basic, Date Field -Flatpickr::make('read_at')->default(now()), -``` -![image](https://user-images.githubusercontent.com/5610289/183526410-e1318643-f9ee-4a5b-b344-4eb1dcf86cf9.png) - -```php -// Datetime field -Flatpickr::make('read_at')->enableTime(), -``` -![image](https://user-images.githubusercontent.com/5610289/183526312-f76afd0f-2132-4179-9120-e6730beb7093.png) -```php -// Month Selector field -Flatpickr::make('read_at')->monthSelect(), -``` -![image](https://user-images.githubusercontent.com/5610289/183527776-09de10a0-9caa-4c73-a114-0855c1d72c67.png) +The Flatpickr component from this package a **datepicker, timepicker, datetimepicker, date range picker, week picker and month picker** based on your configuration. +Most of the fluent config methods you can align are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming. +The rest of the methods are just like the other filament inputs. -```php -// Date Range picker field -Flatpickr::make('read_at')->rangePicker(), -``` -![image](https://user-images.githubusercontent.com/5610289/183526584-121d9062-5a4a-487f-8afc-1b118c4ac474.png) +Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations. ```php -// 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](https://user-images.githubusercontent.com/5610289/183525593-ff27da63-199f-4cda-b444-74cae729d5be.png) -```php -// Specify the input Date Format -Flatpickr::make('read_at')->dateFormat('d/m/Y')->altInput(false), -``` -![image](https://user-images.githubusercontent.com/5610289/183526041-9dbebc2b-14b9-400b-8362-434719cd556b.png) +use Savannabits\Flatpickr\Flatpickr; -```php -// Specify the Datepicker's Theme: See for https://flatpickr.js.org/themes/ available themes -Flatpickr::make('read_at')->theme('material_red'), +// Basic, Date Field +Flatpickr::make('test_field') // Minimal Config as a datepicker +Flatpickr::make('test_field') + ->allowInput(true) + ->altInput(true) + ->altFormat('F j, Y') + ->enableTime() + ->disabledDates(['2023-07-25','2023-07-26']) + ->minDate(today()->startOfYear()) + ->maxDate(today()) + ->minTime(now()->format('H:i:s')) + ->maxTime(now()->addHours(12)->format('H:i:s')) + ->hourIncrement(1) + ->minuteIncrement(10) + ->enableSeconds(false) + ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected + ->defaultMinute(00) + ->allowInvalidPreload() + ->altInputClass('sample-class') + ->animate() + ->dateFormat('Y-m-d') + ->ariaDateFormat('Y-m-d') + ->clickOpens(true) + ->closeOnSelect(true) + ->conjunction(',') + ->inline(true) + ->disableMobile(true) + ->theme(\Savannabits\Flatpickr\Enums\FlatpickrTheme::AIRBNB) + ->mode(\Savannabits\Flatpickr\Enums\FlatpickrMode::RANGE) + ->monthSelectorType(\Savannabits\Flatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN) + ->shorthandCurrentMonth(true) + ->nextArrow('>') + ->prevArrow('<') + ->noCalendar(true) + ->position(\Savannabits\Flatpickr\Enums\FlatpickrPosition::AUTO_CENTER) + ->showMonths(1) + ->weekNumbers(true) + ->use24hr(true) + ->wrap(true) +; +Flatpickr::make('published_at')->enableTime() // Use as a DateTimePicker +Flatpickr::make('week')->weekSelect() // Use as a Week Picker +Flatpickr::make('report_month')->monthSelect() // Use as a Month Picker +Flatpickr::make('start_time')->time() // Use as a TimePicker +Flatpickr::make('filter_range')->range() // Use as a Date Range Picker +Flatpickr::make('list_of_dates')->multiple() // Use as a Multiple Date Picker ``` -![image](https://user-images.githubusercontent.com/5610289/183527163-62abbf8c-436d-4609-aa17-4cd135780ce8.png) -## Automatic dark mode: -![image](https://user-images.githubusercontent.com/5610289/183527360-952ff77f-df8b-4f5b-b00b-489b302b43fa.png) - ## Testing diff --git a/src/Enums/FlatpickrMode.php b/src/Enums/FlatpickrMode.php index 9197653..c1d16dc 100644 --- a/src/Enums/FlatpickrMode.php +++ b/src/Enums/FlatpickrMode.php @@ -1,8 +1,11 @@ '; + protected ?string $prevArrow = '<'; + protected bool $noCalendar = false; + protected bool $shorthandCurrentMonth = false; protected bool $static = false; + protected bool $use24hr = false; + protected bool $weekNumbers = false; + protected bool $wrap = false; + protected int $showMonths = 1; protected FlatpickrPosition $position = FlatpickrPosition::AUTO; + protected FlatpickrMonthSelectorType $monthSelectorType = FlatpickrMonthSelectorType::DROPDOWN; + protected bool $animate = true; + protected bool $closeOnSelect = true; public function getConfig(): array @@ -71,10 +114,10 @@ public function getConfig(): array $this->mode(FlatpickrMode::MULTIPLE); } if ($this->isEnableTime()) { - if (!\Str::of($this->getDateFormat())->contains('H',ignoreCase: true)) { + if (! \Str::of($this->getDateFormat())->contains('H', ignoreCase: true)) { $this->dateFormat('Y-m-d H:i:s'); } - if (!\Str::of($this->getAltFormat())->contains('H',ignoreCase: true)) { + if (! \Str::of($this->getAltFormat())->contains('H', ignoreCase: true)) { $this->altFormat('F j Y H:i K'); } } @@ -146,12 +189,10 @@ public function getConfig(): array if ($this->getEnabledDates()) { $config['enabled'] = $this->getEnabledDates(); } + return $config; } - /** - * @return bool - */ public function isTime(): bool { return $this->time; @@ -160,6 +201,7 @@ public function isTime(): bool public function time(bool $time = true): static { $this->time = $time; + return $this; } @@ -197,9 +239,11 @@ public static function dehydratePickerState($component, $state) return $state; } + public function mode(FlatpickrMode $mode): static { $this->mode = $mode; + return $this; } @@ -211,6 +255,7 @@ public function getMode(): string public function altInputClass(?string $altInputClass = ''): static { $this->altInputClass = $altInputClass; + return $this; } @@ -222,6 +267,7 @@ public function getAltInputClass(): ?string public function allowInput(bool $allowInput = true): static { $this->allowInput = $allowInput; + return $this; } @@ -238,6 +284,7 @@ public function isAllowInvalidPreload(): bool public function allowInvalidPreload(bool $allowInvalidPreload = true): static { $this->allowInvalidPreload = $allowInvalidPreload; + return $this; } @@ -249,6 +296,7 @@ public function getAriaDateFormat(): ?string public function ariaDateFormat(?string $ariaDateFormat): static { $this->ariaDateFormat = $ariaDateFormat; + return $this; } @@ -260,6 +308,7 @@ public function getConjunction(): ?string public function conjunction(?string $conjunction): static { $this->conjunction = $conjunction; + return $this; } @@ -271,6 +320,7 @@ public function isClickOpens(): bool public function clickOpens(bool $clickOpens = true): static { $this->clickOpens = $clickOpens; + return $this; } @@ -292,6 +342,7 @@ public function getDefaultMinute(): int public function defaultMinute(int $defaultMinute): static { $this->defaultMinute = $defaultMinute; + return $this; } @@ -303,6 +354,7 @@ public function getDefaultSeconds(): int public function defaultSeconds(int $defaultSeconds): static { $this->defaultSeconds = $defaultSeconds; + return $this; } @@ -314,6 +366,7 @@ public function getDisabledDates(): array public function disabledDates(array $disabledDates = []): static { $this->disabledDates = $disabledDates; + return $this; } @@ -325,6 +378,7 @@ public function getEnabledDates(): ?array public function enabledDates(array $enabledDates = []): static { $this->enabledDates = $enabledDates; + return $this; } @@ -336,6 +390,7 @@ public function isDisableMobile(): bool public function disableMobile(bool $disableMobile = true): static { $this->disableMobile = $disableMobile; + return $this; } @@ -347,6 +402,7 @@ public function isEnableSeconds(): bool public function enableSeconds(bool $enableSeconds = true): static { $this->enableSeconds = $enableSeconds; + return $this; } @@ -358,6 +414,7 @@ public function getHourIncrement(): int public function hourIncrement(int $hourIncrement = 1): static { $this->hourIncrement = $hourIncrement; + return $this; } @@ -369,6 +426,7 @@ public function getMinuteIncrement(): int public function minuteIncrement(int $minuteIncrement = 5): static { $this->minuteIncrement = $minuteIncrement; + return $this; } @@ -380,6 +438,7 @@ public function isInline(): bool public function inline(bool $inline = true): static { $this->inline = $inline; + return $this; } @@ -391,6 +450,7 @@ public function getMaxDate(): Carbon|string|null public function maxDate(Carbon|string|null $maxDate = 'now'): static { $this->maxDate = $maxDate ? Carbon::parse($maxDate) : $maxDate; + return $this; } @@ -402,6 +462,7 @@ public function getMinDate(): Carbon|string|null public function minDate(Carbon|string|null $minDate): static { $this->minDate = $minDate ? Carbon::parse($minDate) : $minDate; + return $this; } @@ -413,6 +474,7 @@ public function getMaxTime(): ?string public function maxTime(?string $maxTime): static { $this->maxTime = $maxTime; + return $this; } @@ -424,6 +486,7 @@ public function getMinTime(): ?string public function minTime(?string $minTime): static { $this->minTime = $minTime; + return $this; } @@ -435,6 +498,7 @@ public function getNextArrow(): ?string public function nextArrow(?string $nextArrow = '>'): static { $this->nextArrow = $nextArrow; + return $this; } @@ -446,6 +510,7 @@ public function isNoCalendar(): bool public function noCalendar(bool $noCalendar = true): static { $this->noCalendar = $noCalendar; + return $this; } @@ -457,6 +522,7 @@ public function isShorthandCurrentMonth(): bool public function shorthandCurrentMonth(bool $shorthandCurrentMonth = true): static { $this->shorthandCurrentMonth = $shorthandCurrentMonth; + return $this; } @@ -468,6 +534,7 @@ public function isStatic(): bool public function static(bool $static = true): static { $this->static = $static; + return $this; } @@ -479,6 +546,7 @@ public function isUse24hr(): bool public function use24hr(bool $use24hr = true): static { $this->use24hr = $use24hr; + return $this; } @@ -490,6 +558,7 @@ public function isWeekNumbers(): bool public function weekNumbers(bool $weekNumbers = true): static { $this->weekNumbers = $weekNumbers; + return $this; } @@ -501,6 +570,7 @@ public function isWrap(): bool public function wrap(bool $wrap = true): static { $this->wrap = $wrap; + return $this; } @@ -512,6 +582,7 @@ public function getShowMonths(): int public function showMonths(int $showMonths = 1): static { $this->showMonths = $showMonths; + return $this; } @@ -523,6 +594,7 @@ public function getPosition(): string public function position(FlatpickrPosition $position): static { $this->position = $position; + return $this; } @@ -534,12 +606,10 @@ public function getMonthSelectorType(): string public function monthSelectorType(FlatpickrMonthSelectorType $monthSelectorType): static { $this->monthSelectorType = $monthSelectorType; + return $this; } - /** - * @return bool - */ public function isAnimate(): bool { return $this->animate; @@ -548,6 +618,7 @@ public function isAnimate(): bool public function animate(bool $animate = true): static { $this->animate = $animate; + return $this; } @@ -559,6 +630,7 @@ public function isCloseOnSelect(): bool public function closeOnSelect(bool $closeOnSelect = true): static { $this->closeOnSelect = $closeOnSelect; + return $this; } @@ -570,12 +642,14 @@ public function getPrevArrow(): ?string public function prevArrow(?string $prevArrow): static { $this->prevArrow = $prevArrow; + return $this; } public function weekSelect(bool $weekSelect = true): static { $this->weekSelect = $weekSelect; + return $this; } @@ -587,6 +661,7 @@ public function isWeekSelect(): bool public function customConfig(array|\Closure $config): static { $this->config = $config; + return $this; } @@ -598,6 +673,7 @@ public function getCustomConfig(): array public function range(bool $rangePicker = true): static { $this->rangePicker = $rangePicker; + return $this; } @@ -609,6 +685,7 @@ public function isRangePicker(): bool public function multiple(bool $multiplePicker = true): static { $this->multiplePicker = $multiplePicker; + return $this; } @@ -620,6 +697,7 @@ public function isMultiplePicker(): bool public function monthSelect(?bool $monthSelect = true): static { $this->monthSelect = $monthSelect; + return $this; } @@ -631,6 +709,7 @@ public function isMonthSelect(): bool public function altInput(bool $altInput = true): static { $this->altInput = $altInput; + return $this; } @@ -642,6 +721,7 @@ public function isAltInput(): bool public function enableTime(bool $enableTime = true): static { $this->enableTime = $enableTime; + return $this; } @@ -691,15 +771,17 @@ public function getThemeAsset(): string if ($this->getTheme() === FlatpickrTheme::DEFAULT->value) { $this->theme(FlatpickrTheme::LIGHT); } - return asset("vendor/".\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME."/flatpickr/themes/".$this->getTheme().".css"); + + return asset('vendor/'.\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME.'/flatpickr/themes/'.$this->getTheme().'.css'); } + public function getDarkThemeAsset(): string { - return asset("vendor/".\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME."/flatpickr/themes/dark.css"); + return asset('vendor/'.\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME.'/flatpickr/themes/dark.css'); } + public function getLightThemeAsset(): string { - return asset("vendor/".\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME."/flatpickr/themes/light.css"); + return asset('vendor/'.\Savannabits\Flatpickr\Flatpickr::PACKAGE_NAME.'/flatpickr/themes/light.css'); } - } diff --git a/src/FlatpickrServiceProvider.php b/src/FlatpickrServiceProvider.php index c123d2e..ead59f9 100644 --- a/src/FlatpickrServiceProvider.php +++ b/src/FlatpickrServiceProvider.php @@ -3,26 +3,25 @@ namespace Savannabits\Flatpickr; use Filament\FilamentManager; -use Filament\PluginServiceProvider; use Spatie\LaravelPackageTools\Package; use Spatie\LaravelPackageTools\PackageServiceProvider; class FlatpickrServiceProvider extends PackageServiceProvider { protected array $styles = [ - 'flatpickr-css' => __DIR__ . '/../resources/dist/flatpickr/flatpickr.css', - 'month-select-style' => __DIR__ . '/../resources/dist/flatpickr/plugins/monthSelect/style.css', - 'confirm-date-style' => __DIR__ . '/../resources/dist/flatpickr/plugins/confirmDate/confirmDate.css', + 'flatpickr-css' => __DIR__.'/../resources/dist/flatpickr/flatpickr.css', + 'month-select-style' => __DIR__.'/../resources/dist/flatpickr/plugins/monthSelect/style.css', + 'confirm-date-style' => __DIR__.'/../resources/dist/flatpickr/plugins/confirmDate/confirmDate.css', ]; protected array $beforeCoreScripts = [ -// 'flatpickr-core' => __DIR__ . '/../public/dist/flatpickr.min.js', -// 'flatpickr-range-plugin' => __DIR__ . '/../public/dist/plugins/rangePlugin.js', -// 'flatpickr-month-select' => __DIR__ . '/../public/dist/plugins/monthSelect/index.js', -// 'flatpickr-week-select' => __DIR__ . '/../public/dist/plugins/weekSelect/weekSelect.js', -// 'flatpickr-confirm-date' => __DIR__ . '/../public/dist/plugins/confirmDate/confirmDate.js', -// 'async-alpine' => "https://cdn.jsdelivr.net/npm/async-alpine@1.x.x/dist/async-alpine.script.js" -// 'filament-flatpickr' => __DIR__.'/../resources/dist/datepicker.js', + // 'flatpickr-core' => __DIR__ . '/../public/dist/flatpickr.min.js', + // 'flatpickr-range-plugin' => __DIR__ . '/../public/dist/plugins/rangePlugin.js', + // 'flatpickr-month-select' => __DIR__ . '/../public/dist/plugins/monthSelect/index.js', + // 'flatpickr-week-select' => __DIR__ . '/../public/dist/plugins/weekSelect/weekSelect.js', + // 'flatpickr-confirm-date' => __DIR__ . '/../public/dist/plugins/confirmDate/confirmDate.js', + // 'async-alpine' => "https://cdn.jsdelivr.net/npm/async-alpine@1.x.x/dist/async-alpine.script.js" + // 'filament-flatpickr' => __DIR__.'/../resources/dist/datepicker.js', ]; protected array $scripts = [