New Features Added:

- Added support for confirmDate plugin - Configurable date mode including range and multiple pickers: rangePicker() and multiplePicker() functions - Added support for weekSelect plugin - Added the missing hasConfigFile() directive in spatie tools
savannabits · Aug 8, 2022 · f065086 · f065086
1 parent 18065f4
commit f065086
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 17 deletions.
diff --git a/resources/views/flatpickr.blade.php b/resources/views/flatpickr.blade.php
@@ -7,12 +7,15 @@
     $attribs = [
         "disabled" => $isDisabled(),
         "theme" => $getTheme(),
+        'monthSelect' => $isMonthSelect(),
+        'weekSelect' => $isWeekSelect(),
+        'mode' => $isRangePicker() ? 'range' : ($isMultiplePicker() ? 'multiple': 'single')
     ];
 @endphp
 @once
     <script>
         document.addEventListener('alpine:init', () => {
-            Alpine.data('datepicker', (model, packageConfig,monthPicker,attribs) => ({
+            Alpine.data('datepicker', (model, packageConfig,attribs) => ({
                 state: model,
                 mode: 'light',
                 attribs: attribs,
@@ -22,23 +25,30 @@
                 init() {
                     this.mode = localStorage.getItem('theme') || (this.darkStatus ? 'dark' : 'light')
                     const config = {
+                        mode: attribs.mode,
                         time_24hr: true,
                         altFormat: 'F j, Y',
                         disableMobile: true,
                         initialDate: this.state,
                         allowInvalidPreload: true,
                         static: false,
-                        plugins: [],
+                        plugins: [new confirmDatePlugin({
+                            confirmText: "OK",
+                            showAlways: false,
+                            theme: this.mode
+                        })],
                         ...packageConfig,
                     };
-                    if (monthPicker) {
+                    if (attribs.monthSelect) {
                         config.plugins.push(new monthSelectPlugin({
                             shorthand: false, //defaults to false
                             dateFormat: "Y-m-01", //defaults to "F Y"
                             altInput: true,
                             altFormat: "F, Y", //defaults to "F Y"
                             theme: this.mode // defaults to "light"
                         }))
+                    } else if(attribs.weekSelect) {
+                        config.plugins.push(new weekSelect({}))
                     }
                     const fp = flatpickr(this.$refs.picker, config);
                 }
@@ -56,13 +66,13 @@
     :required="$isRequired()"
     :state-path="$getStatePath()"
 >
-    <div wire:ignore x-data="datepicker(@entangle($getStatePath()),@js($config),@js($isMonthPicker()), @js($attribs))">
+    <div wire:ignore x-data="datepicker(@entangle($getStatePath()),@js($config), @js($attribs))">
+        <template x-if="attribs.theme!=='default'">
+            <link x-else rel="stylesheet" type="text/css" :href="`https://npmcdn.com/flatpickr/dist/themes/${attribs.theme}.css`">
+        </template>
         <template x-if="mode ==='dark'">
             <link rel="stylesheet" type="text/css" :href="`https://npmcdn.com/flatpickr/dist/themes/dark.css`">
         </template>
-        <template x-if="mode ==='light' && attribs.theme!=='default'">
-            <link x-else rel="stylesheet" type="text/css" :href="`https://npmcdn.com/flatpickr/dist/themes/${attribs.theme}.css`">
-        </template>
         <!-- Interact with the `state` property in Alpine.js -->
         <div class="flex items-center justify-start relative">
             <x-heroicon-o-calendar

diff --git a/src/Flatpickr.php b/src/Flatpickr.php
@@ -7,13 +7,71 @@
 class Flatpickr extends Field
 {
     protected string $view = 'filament-flatpickr::flatpickr';
-    protected bool $monthPicker = false;
+    protected bool $monthSelect = false;
+    protected bool $weekSelect = false;
+    protected bool $rangePicker = false;
+    protected bool $multiplePicker = false;
     protected bool $altInput = true;
     protected ?string $altFormat = 'F j, Y';
     protected bool $enableTime = false;
     protected ?string $dateFormat = 'Y-m-d';
     protected ?string $theme;
 
+
+    /**
+     * @param bool $weekSelect
+     * @return Flatpickr
+     */
+    public function weekSelect(bool $weekSelect = true): Flatpickr
+    {
+        $this->weekSelect = $weekSelect;
+        return $this;
+    }
+
+    /**
+     * @return bool
+     */
+    public function isWeekSelect(): bool
+    {
+        return $this->weekSelect;
+    }
+
+    /**
+     * @param bool $rangePicker
+     * @return Flatpickr
+     */
+    public function rangePicker(bool $rangePicker = true): Flatpickr
+    {
+        $this->rangePicker = $rangePicker;
+        return $this;
+    }
+
+    /**
+     * @return bool
+     */
+    public function isRangePicker(): bool
+    {
+        return $this->rangePicker;
+    }
+
+    /**
+     * @param bool $multiplePicker
+     * @return Flatpickr
+     */
+    public function multiplePicker(bool $multiplePicker = true): Flatpickr
+    {
+        $this->multiplePicker = $multiplePicker;
+        return $this;
+    }
+
+    /**
+     * @return bool
+     */
+    public function isMultiplePicker(): bool
+    {
+        return $this->multiplePicker;
+    }
+
     protected function setUp(): void
     {
         parent::setUp();
@@ -23,21 +81,21 @@ protected function setUp(): void
     }
 
     /**
-     * @param bool $monthPicker
+     * @param bool $monthSelect
      * @return Flatpickr
      */
-    public function monthPicker(?bool $monthPicker = true): Flatpickr
+    public function monthSelect(?bool $monthSelect = true): Flatpickr
     {
-        $this->monthPicker = $monthPicker;
+        $this->monthSelect = $monthSelect;
         return $this;
     }
 
     /**
      * @return bool
      */
-    public function isMonthPicker(): bool
+    public function isMonthSelect(): bool
     {
-        return $this->monthPicker;
+        return $this->monthSelect;
     }
 
     /**

diff --git a/src/FlatpickrServiceProvider.php b/src/FlatpickrServiceProvider.php
@@ -12,14 +12,18 @@ class FlatpickrServiceProvider extends PluginServiceProvider
 {
     protected array $styles = [
        'flatpickr-css'  => __DIR__.'/../public/dist/flatpickr.min.css',
-        'monthselect-style' =>__DIR__.'/../public/dist/plugins/monthSelect/style.css',
+        'month-select-style' =>__DIR__.'/../public/dist/plugins/monthSelect/style.css',
+        'confirm-date-style' =>__DIR__.'/../public/dist/plugins/confirmDate/confirmDate.css',
     ];
     protected array $beforeCoreScripts = [
-        'flatpickr-js' =>      __DIR__.'/../public/dist/flatpickr.min.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',
     ];
+
     protected array $scripts = [
-        'range-plugin' => __DIR__.'/../public/dist/plugins/rangePlugin.js',
-        'month-select' => __DIR__.'/../public/dist/plugins/monthSelect/index.js'
     ];
 
     public function configurePackage(Package $package): void