Merge pull request #24 from takielias/10.x-dev

Fix Datepicker

Author: takielias

resources/views/components/forms/inputs/flat-picker.blade.php

@@ -6,18 +6,10 @@
     @if($value) value="{{ $value }}" @endif
     {{ $attributes->merge(['class' => config('tablar-kit.default-class'). ' flatpickr']) }}
 />
-
-@once
-    @push('js')
-        <script type="module">
-            document.addEventListener('DOMContentLoaded', function () {
-                window.flatpickr(".flatpickr");
-            });
-        </script>
-    @endpush
-    @push('css')
-        <style>
-
-        </style>
-    @endpush
-@endonce
+@push('js')
+    <script type="module">
+        document.addEventListener('DOMContentLoaded', function () {
+            window.flatpickr("#{{$id}}", {!! $jsonOptions() !!})
+        });
+    </script>
+@endpush

resources/views/components/forms/inputs/lite-picker.blade.php

@@ -7,24 +7,23 @@
     {{ $attributes->merge(['class' => config('tablar-kit.default-class'). ' litepickr']) }}
 />
 
-@once
-    @push('js')
-        <script type="module">
-            document.addEventListener('DOMContentLoaded', () => {
-                const optional_config = {};
-                if (window.Litepicker) {
-                    new Litepicker({
-                        element: document.getElementById('{{ $id }}'),
-                        buttonText: {
-                            previousMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
+@push('js')
+    <script type="module">
+        document.addEventListener('DOMContentLoaded', () => {
+            const optional_config = {!! $jsonOptions() !!};
+            if (window.Litepicker) {
+                const default_config = {
+                    element: document.getElementById('{{ $id }}'),
+                    buttonText: {
+                        previousMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
-                            nextMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
+                        nextMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
-                        },
-                    });
-                }
-            });
-        </script>
-
-    @endpush
-@endonce
+                    },
+                };
+                const config = Object.assign({}, default_config, optional_config);
+                new Litepicker(config);
+            }
+        });
+    </script>
+@endpush