From 965eeade876eda02e8a57ab0fc342baf308e2349 Mon Sep 17 00:00:00 2001
From: tanthammar <tinahammar@gmail.com>
Date: Thu, 6 May 2021 16:46:06 +0200
Subject: [PATCH] Config for default first day of week. Remove the need for
 manual translation files Set any weekday as first day of week Defaults to
 app()->getLocale()

---
 packages/forms/config/forms.php               |  2 +
 .../components/date-time-picker.blade.php     | 37 ++++-------
 packages/forms/src/Components/DatePicker.php  | 62 +++++++++++++++++++
 3 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/packages/forms/config/forms.php b/packages/forms/config/forms.php
index 3460f8f8aa..19252e5388 100644
--- a/packages/forms/config/forms.php
+++ b/packages/forms/config/forms.php
@@ -6,4 +6,6 @@ return [
 
     'default_attachment_upload_route' => null,
 
+    'first-day-of-week' => 1, //0 to 7 are accepted values. Monday = 1, Sunday = 7 or 0.
+
 ];
diff --git a/packages/forms/resources/views/components/date-time-picker.blade.php b/packages/forms/resources/views/components/date-time-picker.blade.php
index f9dfaa009e..f81ec81b64 100644
--- a/packages/forms/resources/views/components/date-time-picker.blade.php
+++ b/packages/forms/resources/views/components/date-time-picker.blade.php
@@ -12,9 +12,16 @@
 @pushonce('filament-scripts:date-time-picker-component')
     <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.8.21/plugin/customParseFormat.js"></script>
+    <script src="https://unpkg.com/dayjs@1.10.4/plugin/localeData.js"></script>
+    <script src="https://unpkg.com/dayjs@1.10.4/locale/{{ $formComponent->getLocale() ?? app()->getLocale() }}.js"></script>
 
     <script>
         dayjs.extend(window.dayjs_plugin_customParseFormat)
+        dayjs.extend(window.dayjs_plugin_localeData)
+        dayjs.locale('{{ $formComponent->getLocale() ?? app()->getLocale() }}')
+
+        const week = dayjs.weekdaysShort()
+        const weekDays = (n) => n == 0 ? week : [...week.slice(n), ...week.slice(0, n)]
 
         function dateTimePicker(config) {
             return {
@@ -54,6 +61,8 @@
 
                 value: config.value,
 
+                firstDayOfWeek: config.firstDayOfWeek,
+
                 clearValue: function () {
                     this.setValue(null)
 
@@ -286,7 +295,7 @@
 
                 setupDaysGrid: function () {
                     this.emptyDaysInFocusedMonth = Array.from({
-                        length: this.focusedDate.date(1).day(),
+                        length: this.focusedDate.date( 8 - this.firstDayOfWeek).day(),
                     }, (_, i) => i + 1)
 
                     this.daysInFocusedMonth = Array.from({
@@ -359,6 +368,7 @@
             placeholder: '{{ __($formComponent->getPlaceholder()) }}',
             required: {{ $formComponent->isRequired() ? 'true' : 'false' }},
             time: {{ $formComponent->hasTime() ? 'true' : 'false' }},
+            firstDayOfWeek: {{ $formComponent->getFirstDayOfWeek() }},
             @if (Str::of($formComponent->getBindingAttribute())->startsWith('wire:model'))
                 value: @entangle($formComponent->getName()){{ Str::of($formComponent->getBindingAttribute())->after('wire:model') }},
             @endif
@@ -425,20 +435,7 @@
                             x-model="focusedMonth"
                             class="flex-grow p-0 text-lg font-medium text-gray-800 border-0 cursor-pointer focus:ring-0 focus:outline-none"
                         >
-                            <template x-for="(month, index) in [
-                                '{{ __('forms::fields.dateTimePicker.months.january') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.february') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.march') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.april') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.may') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.june') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.july') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.august') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.september') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.october') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.november') }}',
-                                '{{ __('forms::fields.dateTimePicker.months.december') }}',
-                            ]">
+                            <template x-for="(month, index) in dayjs.months()">
                                 <option x-bind:value="index" x-text="month"></option>
                             </template>
                         </select>
@@ -451,15 +448,7 @@
                     </div>
 
                     <div class="grid grid-cols-7 gap-1">
-                        <template x-for="(day, index) in [
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.sunday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.monday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.tuesday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.wednesday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.thursday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.friday') }}',
-                            '{{ __('forms::fields.dateTimePicker.abbreviatedDays.saturday') }}',
-                        ]" :key="index">
+                        <template x-for="(day, index) in weekDays(firstDayOfWeek)" :key="index">
                             <div
                                 x-text="day"
                                 class="text-xs font-medium text-center text-gray-800"
diff --git a/packages/forms/src/Components/DatePicker.php b/packages/forms/src/Components/DatePicker.php
index abc9fe482c..eceb24d653 100644
--- a/packages/forms/src/Components/DatePicker.php
+++ b/packages/forms/src/Components/DatePicker.php
@@ -23,11 +23,16 @@ class DatePicker extends Field
 
     protected $view = 'forms::components.date-time-picker';
 
+    protected string $locale;
+
+    protected int $firstDayOfWeek;
+
     protected function setUp()
     {
         $this->configure(function () {
             $this->displayFormat('F j, Y');
             $this->format('Y-m-d');
+            $this->firstDayOfWeek = config('forms.first-day-of-week');
         });
     }
 
@@ -69,6 +74,16 @@ class DatePicker extends Field
         return $this->minDate;
     }
 
+    public function getFirstDayOfWeek()
+    {
+        return $this->firstDayOfWeek;
+    }
+
+    public function getLocale()
+    {
+        return $this->locale;
+    }
+
     public function hasSeconds()
     {
         return $this->hasSeconds;
@@ -100,4 +115,51 @@ class DatePicker extends Field
 
         return $this;
     }
+
+    /**
+     * Default = app()->getLocale()
+     * DayJS i18 via browser: https://day.js.org/docs/en/i18n/loading-into-browser
+     * Available methods: https://day.js.org/docs/en/plugin/locale-data
+     * Supported locales: https://github.com/iamkun/dayjs/tree/dev/src/locale
+     * @param string $dayJSlocale
+     * @return $this
+     */
+    public function locale(string $dayJSlocale): self
+    {
+        $this->locale = $dayJSlocale;
+        return $this;
+    }
+
+    /**
+     * 0 to 7 are allowed. Monday = 1, Sunday = 0 or 7
+     * @param int $day
+     * @return $this
+     */
+    public function firstDayOfWeek(int $day = 1): self
+    {
+        if($day < 0 || $day > 7) $day = 1;
+        $this->firstDayOfWeek = $day;
+        return $this;
+    }
+
+    /**
+     * Set Sunday as first day of week
+     * @return $this
+     */
+    public function weekStartSunday(): self
+    {
+        $this->firstDayOfWeek = 7;
+        return $this;
+    }
+
+    /**
+     * This method is otiose because Monday is default
+     * <br>But sometimes you want it for code readability
+     * @return $this
+     */
+    public function weekStartMonday(): self
+    {
+        $this->firstDayOfWeek = 1;
+        return $this;
+    }
 }