homemanager-fe/src/components/form/fields/FormDateField.vue

<template>
  <FormField
    :name="name"
    :label="label"
    :disabled="disabled"
    :required="required"
    for-id-prefix="dp-input"
  >
    <template #input="{ invalid, fieldFQN, value, setValue }">
      <Datepicker
        text-input
        arrow-navigation
        :class="[invalid ? 'dp__invalid' : '']"
        :uid="fieldFQN"
        :placeholder="placeholder"
        :disabled="disabled"
        :clearable="clearable"
        v-bind="$attrs"
        :model-value="(value as string)"
        @update:model-value="setValue"
      />
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';
import Datepicker from '@vuepic/vue-datepicker';
import { ExtractComponentProps } from '../../../utils/extract-component-props';

interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
  label: string;
  name: string;
  disabled?: boolean;
  required?: boolean;
  clearable?: boolean;
  placeholder?: string;
}

// https://vue3datepicker.com/
const props = withDefaults(defineProps<DatePickerProps>(), {
  disabled: false,
});
</script>