app/components/Ui/Input/DatePicker.vue

<!--
Sélecteur de dates

@see https://vuetifyjs.com/en/components/date-pickers/
-->

<template>
  <main>
    <v-menu
      v-model="dateOpen"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template #activator="{ on, attrs }">
        <v-text-field
          v-model="datesFormatted"
          autocomplete="off"
          :label="$t(fieldLabel)"
          prepend-icon="mdi-calendar"
          :disabled="readonly"
          v-bind="attrs"
          :dense="dense"
          :single-line="singleLine"
          v-on="on"
          :error="error || !!violation"
          :error-messages="errorMessage || violation ? $t(violation) : ''"
        />
      </template>
      <v-date-picker
        v-model="datesParsed"
        :range="range"
        color="ot-green lighten-1"
        @input="dateOpen = range && datesParsed.length < 2"
      />
    </v-menu>
  </main>
</template>

<script setup lang="ts">

import {useNuxtApp} from "#app";
import {useFieldViolation} from "~/composables/form/useFieldViolation";
import {computed, ComputedRef, Ref} from "@vue/reactivity";
import {useDateUtils} from "~/composables/utils/useDateUtils";
import {onUnmounted, watch, WatchStopHandle} from "@vue/runtime-core";

const props = defineProps({
  field: {
    type: String,
    required: false,
    default: null
  },
  label: {
    type: String,
    required: false,
    default: null
  },
  data: {
    type: [String, Array],
    required: false,
    default: null
  },
  readonly: {
    type: Boolean,
    required: false
  },
  range: {
    type: Boolean,
    required: false
  },
  dense: {
    type: Boolean,
    required: false
  },
  singleLine: {
    type: Boolean,
    required: false
  },
  format: {
    type: String,
    required: false,
    default: 'DD/MM/YYYY'
  },
  error: {
    type: Boolean,
    required: false
  },
  errorMessage: {
    type: String,
    required: false,
    default: null
  }
})

const { emit, $moment } = useNuxtApp()

const { data, range } = props

const {violation, onChange} = useFieldViolation(props.field, emit)

const dateUtils = useDateUtils()

const datesParsed: Ref<Array<string>|string|null> = range ? ref(Array<string>()) : ref(null)

const fieldLabel = props.label ?? props.field

const dateOpen: Ref<boolean> = ref(false)

if (Array.isArray(datesParsed.value)) {
  for (const date of data as Array<string>) {
    if (date) {
      datesParsed.value.push($moment(date).format('YYYY-MM-DD'))
    }
  }
} else {
  datesParsed.value = data ? $moment(data as string).format('YYYY-MM-DD') : null
}

const datesFormatted: ComputedRef<string|null> = computed(() => {
  if (props.range && datesParsed.value && datesParsed.value.length < 2) {
    return null
  }
  return datesParsed.value ? dateUtils.formatDatesAndConcat(datesParsed.value, props.format) :  null
})

const unwatch: WatchStopHandle = watch(datesParsed, (newValue, oldValue) => {
  if (newValue === oldValue) { return }
  if (props.range && newValue && newValue.length < 2) { return }
  onChange(Array.isArray(newValue) ? dateUtils.sortDate(newValue) : newValue)
})

onUnmounted(() => {
  unwatch()
})
</script>

<style scoped>
</style>