add locale to the calendar (#27)

README.md

@@ -65,6 +65,12 @@ return [
      * The flatpickr css will be untouched.
      */
     'use_style' => env('FLATPICKR_USE_STYLE', true),
+
+    /**
+     * The language that flatpickr will use.
+     * If no value is passed, it will be the default one.
+     */
+    'locale' => env('FLATPICKR_LOCALE', null),
 ];
 ```
 
@@ -132,6 +138,16 @@ You can even change the `url` from the component itself:
 
 The `url` passed form the component will take more priority over the config file.
 
+### Locale
+
+If you want to use a different locale then you can change it from the .env file:
+
+```env
+FLATPICKR_LOCALE=de
+```
+
+You can see the [available locales from here.](https://github.com/flatpickr/flatpickr/tree/master/src/l10n)
+
 ### Using the component
 
 Add it to your page.

config/flatpickr.php

@@ -19,4 +19,10 @@
      * The flatpickr css will be untouched.
      */
     'use_style' => env('FLATPICKR_USE_STYLE', true),
+
+    /**
+     * The language that flatpickr will use.
+     * If no value is passed, it will be English.
+     */
+    'locale' => env('FLATPICKR_LOCALE', null),
 ];

resources/views/components/script.blade.php

@@ -1,5 +1,11 @@
 <script src="{{ $url ?? config('flatpickr.js_url') ?? asset('vendor/flatpickr/js/flatpickr.js') }}"></script>
+@if(config('flatpickr.locale'))
+    <script src="https://npmcdn.com/flatpickr/dist/l10n/{{ config('flatpickr.locale') }}.js"></script>
+@endif
+{{-- <script>
+    {!! file_get_contents(base_path('vendor/asdh/laravel-flatpickr/resources/to-be-minified/laravel-flatpickr.js')) !!}
+</script> --}}
 {{-- check /resources/to-be-minified/ folder for not minified scripts --}}
 <script>
-    window.LaravelFlatpickr={__supportedEventNames:["onChange","onOpen","onClose","onMonthChange","onYearChange","onReady","onValueUpdate","onDayCreate"],initializeFlatpickr:function(a){flatpickr(document.getElementById(a.getAttribute("data-selector-id")),this.__config(a))},__config:function(a){let b=JSON.parse(a.getAttribute("data-config"));return"1"===a.getAttribute("data-disable-weekend")&&b.disable.push(this.__disableWeekends()),{...b,...this.__events(a)}},__disableWeekends:function(){return function(a){return 0===a.getDay()||6===a.getDay()}},__events:function(el){let elEvents;return el.getAttributeNames().filter(a=>a.startsWith("on")).reduce((obj,elEventName)=>{let eventName=this.__supportedEventNames.find(a=>a.toLowerCase()===elEventName);return eventName&&(obj[eventName]=function(...params){eval(el.getAttribute(eventName))(...params)}),obj},{})}},document.addEventListener("DOMContentLoaded",function(a){document.querySelectorAll(".flatpickr-input").forEach(a=>window.LaravelFlatpickr.initializeFlatpickr(a))});var observer=new MutationObserver(a=>{a.forEach(a=>{a.removedNodes.length>0&&window.LaravelFlatpickr.initializeFlatpickr(a.previousSibling)})});document.querySelectorAll(".flatpickr-container").forEach(a=>{observer.observe(a,{childList:!0})})
+    window.LaravelFlatpickr={__supportedEventNames:["onChange","onOpen","onClose","onMonthChange","onYearChange","onReady","onValueUpdate","onDayCreate"],initializeFlatpickr:function(e){flatpickr(document.getElementById(e.getAttribute("data-selector-id")),this.__config(e))},__config:function(e){let t=JSON.parse(e.getAttribute("data-config")),a="1"===e.getAttribute("data-disable-weekend");a&&t.disable.push(this.__disableWeekends());let i=e.getAttribute("data-locale"),n=Number(e.getAttribute("data-first-day-of-week")),r=flatpickr.l10ns[i]||{};return{...t,locale:{...r,firstDayOfWeek:n},...this.__events(e)}},__disableWeekends:function(){return function(e){return 0===e.getDay()||6===e.getDay()}},__events:function(el){let elEvents;return el.getAttributeNames().filter(e=>e.startsWith("on")).reduce((obj,elEventName)=>{let eventName=this.__supportedEventNames.find(e=>e.toLowerCase()===elEventName);return eventName&&(obj[eventName]=function(...params){eval(el.getAttribute(eventName))(...params)}),obj},{})}},document.addEventListener("DOMContentLoaded",function(e){document.querySelectorAll(".flatpickr-input").forEach(e=>window.LaravelFlatpickr.initializeFlatpickr(e))});var observer=new MutationObserver(e=>{e.forEach(e=>{e.removedNodes.length>0&&window.LaravelFlatpickr.initializeFlatpickr(e.previousSibling)})});document.querySelectorAll(".flatpickr-container").forEach(e=>{observer.observe(e,{childList:!0})});
 </script>

resources/views/flatpickr/index.blade.php

@@ -6,6 +6,8 @@
         data-selector-id="{{ $selectorId() }}"
         data-config='@json($config())'
         data-disable-weekend="{{ $disableWeekend?1:0 }}"
+        data-first-day-of-week="{{ $firstDayOfWeek }}"
+        data-locale="{{ config('flatpickr.locale', 'default') }}"
         data-input
     />
 

src/Components/Flatpickr.php

@@ -64,7 +64,6 @@ public function config(): array
             'showMonths' => $this->visibleMonths,
             'disableMobile' => $this->disableMobile ?: false,
         ])
-            ->merge($this->firstDayOfWeekConfig())
             ->merge($this->config)
             ->filter(fn ($item) => $item !== null)
             ->toArray();
@@ -144,19 +143,6 @@ public function selectorId(): string
         return $this->clearable ? $this->containerId() : $this->id;
     }
 
-    private function firstDayOfWeekConfig()
-    {
-        if ($this->firstDayOfWeek > 0) {
-            return [
-                'locale' => [
-                    'firstDayOfWeek' => $this->firstDayOfWeek,
-                ],
-            ];
-        }
-
-        return [];
-    }
-
     private function time24hr(): ?bool
     {
         if (! $this->showTime) {

tests/FlatpickrBladeTest.php

@@ -72,8 +72,8 @@
 });
 
 it('uses first day of week as passed', function () {
-    test()->blade('<x-flatpickr id="laravel-flatpickr" :first-day-of-week="1" />')
-        ->assertSee('"locale":{"firstDayOfWeek":1}', false);
+    test()->blade('<x-flatpickr id="laravel-flatpickr" :first-day-of-week="2" />')
+        ->assertSee('data-first-day-of-week="2"', false);
 });
 
 it('can disable the weekend', function () {

tests/FlatpickrStyleAndScriptTest.php

@@ -68,3 +68,10 @@
         ->assertDontSee('https://url-from-config.js')
         ->assertDontSee('vendor/flatpickr/css/flatpickr.css');
 });
+
+it("can set locale from config file", function () {
+    config()->set('flatpickr.locale', 'de');
+
+    test()->blade('<x-flatpickr::script />')
+        ->assertSee('https://npmcdn.com/flatpickr/dist/l10n/de.js');
+});