Merge pull request #638 from code16/fix-daterange-filter-monday-first

Fix date range filter mondayFirst

Author: aguingand

resources/js/filters/components/filters/DateRangeFilter.vue

@@ -13,6 +13,7 @@
     import DateRangeFilterValue from "@/filters/components/filters/DateRangeFilterValue.vue";
     import { cn } from "@/utils/cn";
     import { FilterEmits, FilterProps } from "@/filters/types";
+    import { getDefaultDateLocale, getWeekStartsOn } from "@/utils/dates";
 
     const props = defineProps<FilterProps<DateRangeFilterData>>();
     const emit = defineEmits<FilterEmits<DateRangeFilterData>>();
@@ -158,8 +159,8 @@
                             :class="!inline ? 'hidden' : 'hidden md:block'"
                             v-model="localValue"
                             :number-of-months="2"
-                            :locale="window.navigator.language"
-                            :week-starts-on="props.filter.mondayFirst ? 1 : 0"
+                            :locale="getDefaultDateLocale()"
+                            :week-starts-on="getWeekStartsOn(props.filter.mondayFirst)"
                             @update:start-value="(startDate) => localValue.start = startDate as CalendarDate"
                             @update:model-value="onCalendarChange"
                             :key="renderKey"

resources/js/form/components/fields/Date.vue

@@ -34,11 +34,12 @@ import { createYear, createYearRange, toDate } from 'reka-ui/date'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { __ } from "@/utils/i18n";
+import { getDefaultDateLocale, getWeekStartsOn } from "@/utils/dates";
 
 const props = defineProps<FormFieldProps<FormDateFieldData>>();
 const emit = defineEmits<FormFieldEmits<FormDateFieldData>>();
 
-const dateLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+const dateLocale = getDefaultDateLocale();
 const open = ref(false);
 const isTouch = ref(false);
 
@@ -219,7 +220,7 @@ function onMinuteChange(minute: string) {
                     :model-value="calendarDateValue"
                     v-model:placeholder="calendarViewingDate"
                     :locale="dateLocale"
-                    :week-starts-on="props.field.mondayFirst ? 0 : 6"
+                    :week-starts-on="getWeekStartsOn(props.field.mondayFirst)"
                     @update:model-value="onCalendarDateChange"
                     class="p-3"
                 >

resources/js/utils/dates.ts

@@ -0,0 +1,9 @@
+
+
+export function getWeekStartsOn(mondayFirst: boolean) {
+    return mondayFirst ? 0 : 6;
+}
+
+export function getDefaultDateLocale() {
+    return Intl.DateTimeFormat().resolvedOptions().locale;
+}