app/components/Ui/Input/DatePicker.vue

<!--
Sélecteur de dates, à placer dans un composant `UiForm`
-->

<template>
  <main>
    <div class="d-flex flex-column container mb-6">
      <span class="label">
        {{ $t(fieldLabel) }}
      </span>

      <v-validation
        v-slot="{ errorMessages }"
        v-model="date"
        :rules="rules"
        :error="error || !!fieldViolations"
        :error-messages="
          errorMessage || (fieldViolations ? $t(fieldViolations) : '')
        "
        :validate-on="'lazy input'"
      >
          <UiDatePicker
            v-model="date"
            :readonly="readonly"
            :with-time-picker="withTimePicker"
            class="date-picker"
            @update:model-value="onUpdate($event)"
          />

        <div v-if="errorMessages.value.length > 0" class="v-input__details error_message">
          <div class="v-messages__message">
            <span
              v-for="(msg, i) in errorMessages.value"
              :key="i"
            >
                {{ msg }}
            </span>
          </div>
        </div>
      </v-validation>
    </div>
  </main>
</template>

<script setup lang="ts">
import { formatISO } from 'date-fns'
import type { PropType, Ref } from 'vue'
import { ref } from 'vue'
import { useFieldViolation } from '~/composables/form/useFieldViolation'

const props = defineProps({
  /**
   * v-model
   */
  modelValue: {
    type: String as PropType<Date | string | null>,
    required: false,
    default: null,
  },
  /**
   * Nom de la propriété d'une entité lorsque l'input concerne cette propriété
   * - Utilisé par la validation
   * - Laisser null si le champ ne s'applique pas à une entité
   */
  field: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Label du champ
   * Si non défini, c'est le nom de propriété qui est utilisé
   */
  label: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Définit si le champ est en lecture seule
   */
  readonly: {
    type: Boolean,
    required: false,
  },
  /**
   * Règles de validation
   * @see https://vuetify.cn/en/components/forms/#validation-with-submit-clear
   */
  rules: {
    type: Array,
    required: false,
    default: () => [],
  },
  /**
   * Le champ est-il actuellement en état d'erreur
   */
  error: {
    type: Boolean,
    required: false,
  },
  /**
   * Si le champ est en état d'erreur, quel est le message d'erreur?
   */
  errorMessage: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Si on souhaite avoir le time picker avec
   */
  withTimePicker: {
    type: Boolean,
    default: false,
  },
})

const { fieldViolations, updateViolationState } = useFieldViolation(props.field)

const fieldLabel = props.label ?? props.field

const emit = defineEmits(['update:model-value', 'change'])

const date: Ref<Date | undefined> = ref(
  props.modelValue ? new Date(props.modelValue) : undefined,
)

const onUpdate = (event: string) => {
  updateViolationState()
  date.value = event ? new Date(event) : undefined
  emit('update:model-value', date.value ? formatISO(date.value) : undefined)
}

onBeforeUnmount(() => {
  updateViolationState()
})
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.label {
  position: absolute;
  color: #8e8e8e;
  top: -0.7rem;
  left: 0.75rem;
  background-color: rgb(var(--v-theme-surface));
  padding: 0 0.3rem;
  font-size: 0.8rem;
  z-index: 1;
  transition:
    color 0.2s,
    font-size 0.2s,
    top 0.2s;
}

.date-picker:hover {
  :deep(.dp__input) {
    border-color: #333333;
  }
}

.container:focus-within {
  .label {
    color: #333333;
  }

  :deep(.dp__input_focus) {
    border: solid 2px #333333;
  }

  :deep(.dp__input_icon) {
    color: #333333;
  }
}

.error_message{
  padding-inline: 16px;
}
.v-messages__message{
  color: rgb(var(--v-theme-error));

}
</style>