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
        v-bind="props"
        :class="[invalid ? 'dp__invalid' : '']"
        :uid="fieldFQN"
        :placeholder="placeholder"
        :state="undefined"
        :format="format"
        :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, { VueDatePickerProps } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import { Omit } from 'lodash';
import { computed } from 'vue';

interface DatePickerProps extends VueDatePickerProps {
  label: string;
  name: string;
  disabled?: boolean;
  required?: boolean;
  clearable?: boolean;
  placeholder?: string;
}

// https://vue3datepicker.com/
const props = withDefaults(defineProps<DatePickerProps>(), {
  disabled: false,
  textInput: true,
  arrowNavigation: true,
  enableTimePicker: true,
  autoPosition: true,
  is24: true,
});

const format = computed(() =>
  props.format ?? props.enableTimePicker ? `dd/MM/yyyy, HH:mm` : 'dd/MM/yyyy'
);
</script>