date range picker - internationalize

components/Ui/Input/DateRangePicker.vue

@@ -4,8 +4,10 @@
       :model-value="modelValue"
       range
       multi-calendars
-      auto-apply
-      locale="fr"
+      :auto-apply="autoApply"
+      :locale="i18n.locale"
+      :format-locale="fnsLocale"
+      :format="dateFormatPattern"
       :start-date="today"
       :teleport="true"
       :alt-position="dateRangePickerAltPosition"
@@ -19,10 +21,11 @@
       class="date-range-picker"
       :style="style"
   />
-<!--  :alt-position="dateRangePickerAltPosition"-->
 </template>
 
 <script setup lang="ts">
+import { fr } from 'date-fns/locale';
+import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
 
 const props = defineProps({
   modelValue: {
@@ -38,10 +41,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+const autoApply = false
+
 const updateDateTimeRange = (value: [string, string]) => {
   emit('update:modelValue', value)
 }
 
+const i18n = useI18n()
+
+
+const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
+const dateFormatPattern = DateUtils.getShortFormatPattern(i18n.locale.value as supportedLocales)
+
 const today = new Date()
 
 let style = '';
@@ -56,10 +67,11 @@ if (props.maxHeight !== null) {
 const dateRangePickerAltPosition = (el: HTMLElement) => {
   let xOffset = 0
   const fullWidth = 500
+  const rightPadding = 30
   const rect = el.getBoundingClientRect()
-  
-  if ((rect.left + fullWidth + 20) > window.innerWidth) {
-    xOffset = window.innerWidth - (rect.left + fullWidth + 20)
+
+  if ((rect.left + fullWidth + rightPadding) > window.innerWidth) {
+    xOffset = window.innerWidth - (rect.left + fullWidth + rightPadding)
   }
 
   return {

nuxt.config.ts

@@ -151,7 +151,7 @@ export default defineNuxtConfig({
         vueI18n: {
             legacy: false,
             datetimeFormats: {
-                'fr-FR': {
+                'fr': {
                     short: {
                         year: 'numeric', month: 'numeric', day: 'numeric'
                     },

services/utils/dateUtils.ts

@@ -1,5 +1,12 @@
 import { format } from 'date-fns';
 import ArrayUtils from "~/services/utils/arrayUtils";
+import { enUS, fr } from 'date-fns/locale'
+
+export const enum supportedLocales {
+  FR = 'fr',
+  EN = 'en'
+}
+
 
 export default class DateUtils {
 
@@ -28,4 +35,18 @@ export default class DateUtils {
   public static sort(dates: Array<Date>, reverse: boolean = false): Array<Date> {
     return ArrayUtils.sort(dates, reverse) as Array<Date>
   }
+
+  public static getFnsLocale(code: supportedLocales): Locale {
+    return {
+      'en': enUS,
+      'fr' : fr
+    }[code]
+  }
+
+  public static getShortFormatPattern(code: supportedLocales): string {
+    return {
+      'en': 'MM/dd/yyyy',
+      'fr': 'dd/MM/yyyy'
+    }[code]
+  }
 }