setup date range picker update event

components/Layout/SubHeader/DataTimingRange.vue

@@ -5,7 +5,11 @@
         {{ $t('period_choose') }}
       </span>
 
-      <UiInputDateRangePicker v-model="datesRange" max-height="28" />
+      <UiInputDateRangePicker
+          :model-value="datesRange"
+          max-height="28"
+          @update:model-value="updateDateTimeRange"
+      />
     </div>
 
     <v-btn
@@ -32,6 +36,8 @@ import {useFormStore} from "~/stores/form";
 import {WatchStopHandle} from "@vue/runtime-core";
 import {useEntityManager} from "~/composables/data/useEntityManager";
 import Access from "~/models/Access/Access";
+import DateUtils from "~/services/utils/dateUtils";
+import formatISO from 'date-fns/formatISO'
 
 const btn: Ref = ref(null)
 const show: Ref<boolean> = ref(false)
@@ -45,23 +51,34 @@ const { em } = useEntityManager()
 const start = accessProfileStore.historical.dateStart
 const end = accessProfileStore.historical.dateStart
 
-const datesRange: Ref<Array<Date | null>> = ref([
-  start ? new Date(start) : null,
-  end ? new Date(end) : null
-])
+const datesRange: Ref<Array<Date> | null> = ref((start && end) ? [new Date(start), new Date(end)] : null)
 
 const updateDateTimeRange = async (dates: Array<Date>): Promise<any> => {
   if (accessProfileStore.id === null) {
     throw new Error('Invalid profile id')
   }
 
-  accessProfileStore.setHistoricalRange(dates[0], dates[1])
+  datesRange.value = dates
+
+  if (datesRange.value === null || datesRange.value[0] === null || datesRange.value[1] === null) {
+    return
+  }
+
+  accessProfileStore.setHistoricalRange(
+      formatISO(datesRange.value[0], { representation: 'date' }),
+      formatISO(datesRange.value[1], { representation: 'date' })
+  )
   setDirty(false)
 
+  const access = await em.fetch(Access, accessProfileStore.id)
+
+  const settings = access.setting
+  settings.historical = accessProfileStore.historical
+
   await em.patch(
       Access,
       accessProfileStore.id,
-      {'historical': accessProfileStore.historical}
+      {'setting': settings}
   )
 
   window.location.reload()

components/Ui/Input/DateRangePicker.vue

@@ -24,13 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { fr } from 'date-fns/locale';
 import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
 
 const props = defineProps({
   modelValue: {
     type: Array,
-    required: true
+    required: false,
+    default: null
   },
   maxHeight: {
     type: Number,