app/components/Layout/Header/UniversalCreation/EventParams.vue

<template>
  <v-container class="pa-4">
    <v-row class="align-center">
      <v-col cols="2">
        <span>{{ $t('start_on') }}</span>
      </v-col>

      <v-col cols="6">
        <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
        <!-- TODO: déplacer le VueDatePicker dans un composant Input -->
        <VueDatePicker
            v-model="eventStart"
            :locale="i18n.locale.value"
            :format-locale="fnsLocale"
            :format="dateFormatPattern"
            enable-time-picker
            :teleport="true"
            text-input
            :auto-apply="true"
            :select-text="$t('select')"
            :cancel-text="$t('cancel')"
            @update:model-value="onUpdate"
        />
      </v-col>
    </v-row>

    <v-row v-show="eventStart < now" class="anteriorDateWarning mt-0">
      <v-col cols="2" class="pt-1"></v-col>
      <v-col cols="9" class="pt-1">
        <i class="fa fa-circle-info" /> {{ $t('please_note_that_this_reservation_start_on_date_anterior_to_now') }}
      </v-col>
    </v-row>

    <v-row class="align-center">
      <v-col cols="2">
        <span>{{ $t('for_time') }}</span>
      </v-col>

      <v-col cols="10" class="d-flex flex-row align-center">
        <UiInputNumber v-model="eventDurationDays" class="mx-3" :min="0" @update:model-value="onUpdate" />
        <span>{{ $t('day(s)') }}</span>

        <UiInputNumber v-model="eventDurationHours" class="mx-3" :min="0" @update:model-value="onUpdate" />
        <span>{{ $t('hour(s)') }}</span>

        <UiInputNumber v-model="eventDurationMinutes" class="mx-3" :min="0" @update:model-value="onUpdate" />
        <span>{{ $t('minute(s)') }}</span>
      </v-col>

    </v-row>

    <v-row>
      <v-col cols="2">
        <span>{{ $t('ending_date') }}</span>
      </v-col>

      <v-col cols="6" class="endDate">
        <span>{{ formattedEventEnd }}</span>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">

  const i18n = useI18n()

  // Get the start of the next hour as a default event start
  import {ref, Ref} from "@vue/reactivity";
  import {add, format, startOfHour, formatISO} from "date-fns";
  import {ComputedRef} from "vue";
  import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";

  const now: Date = new Date()
  const eventStart: Ref<Date> = ref(startOfHour(add(now, { 'hours': 1 })))

  const eventDurationDays: Ref<number> = ref(0)
  const eventDurationHours: Ref<number> = ref(1)
  const eventDurationMinutes: Ref<number> = ref(0)

  // Duration of the events, in minutes
  const eventDuration: ComputedRef<number> = computed(() => {
    return (eventDurationDays.value * 24 * 60) + (eventDurationHours.value * 60) + eventDurationMinutes.value
  })

  const eventEnd: ComputedRef<Date> = computed(() => add(eventStart.value, { 'minutes': eventDuration.value }))
  const dateFormatPattern = DateUtils.getFormatPattern(i18n.locale.value as supportedLocales)

  // Date picker conf
  const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)

  const formattedEventEnd: ComputedRef<string> = computed(() => {
    return format(eventEnd.value, 'EEEE dd MMMM yyyy HH:mm', {locale: fnsLocale})
  })

  const emit = defineEmits(['paramsUpdated'])

  const onUpdate = () => {
    const params = {
      'start': formatISO(eventStart.value),
      'end': formatISO(eventEnd.value),
    }

    emit('paramsUpdated', params)
  }



</script>

<style scoped lang="scss">
  .endDate {
    font-weight: 600;
    text-transform: capitalize;
    color: rgb(var(--v-theme-on-neutral));
  }

  .anteriorDateWarning {
    color: rgb(var(--v-theme-info));
    font-weight: 600;
  }
</style>