add DatePicker component and move DateRangePicker

components/Layout/SubHeader/DataTimingRange.vue

@@ -5,7 +5,7 @@
         {{ $t('period_choose') }}
       </span>
 
-      <UiInputDateRangePicker
+      <UiDateRangePicker
           :model-value="datesRange"
           :max-height="28"
           @update:model-value="updateDateTimeRange"

components/Ui/DatePicker.vue

@@ -0,0 +1,71 @@
+<!--
+Sélecteur de dates
+
+@see https://vuetifyjs.com/en/components/date-pickers/
+-->
+
+<template>
+  <main>
+    <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
+    <VueDatePicker
+        :model-value="modelValue"
+        :locale="i18n.locale.value"
+        :format-locale="fnsLocale"
+        :format="dateFormat"
+        :enable-time-picker="withTime"
+        :teleport="true"
+        text-input
+        :auto-apply="true"
+        :select-text="$t('select')"
+        :cancel-text="$t('cancel')"
+        @update:model-value="onUpdate"
+    />
+  </main>
+</template>
+
+<script setup lang="ts">
+import {computed} from "@vue/reactivity";
+import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
+import {PropType} from "@vue/runtime-core";
+
+const i18n = useI18n()
+
+const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
+const defaultFormatPattern = DateUtils.getFormatPattern(i18n.locale.value as supportedLocales)
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<Date>,
+    required: false,
+    default: null
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  format: {
+    type: String,
+    required: false,
+    default: null
+  },
+  withTime: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+const dateFormat: ComputedRef<string> = computed(() => props.format ?? defaultFormatPattern)
+
+const emit = defineEmits(['update:model-value'])
+
+const onUpdate = (event: Date) => {
+  emit('update:model-value', event)
+}
+
+</script>
+
+<style scoped>
+
+</style>

services/utils/dateUtils.ts

@@ -54,6 +54,14 @@ export default class DateUtils {
     return mapping[code] ?? mapping[defaultLocale]
   }
 
+  public static getFormatPattern(code: supportedLocales): string {
+    const mapping = {
+      'en': 'MM/dd/yyyy HH:mm',
+      'fr': 'dd/MM/yyyy HH:mm'
+    }
+    return mapping[code] ?? mapping[defaultLocale]
+  }
+
   public static formatIsoShortDate(date: Date): string {
     return format(date, 'yyyy-MM-dd')
   }