el-date-picker component (Element UI)

el-date-picker.vue

<template>

// Component attrs
    <el-date-picker
        :size="props.size"
        :modelValue="props.modelValue"
        @change="onChange"
        @update:modelValue="handleUpdate($event, value)"
        :type="props.type"
        range-separator="-"
        start-placeholder="Data inicial"
        end-placeholder="Data final"
        format="DD/MM/YYYY"
        value-format="YYYY-MM-DD"
        :disabled="props.disabled"
    />
</template>

<script setup>

// Component props using defineProps from script setup
const props = defineProps({
    size: {
        type: String,
        required: true,
    },
    modelValue: {
        type: [String, Number, Array, Object],
        default: Array,
    },
    type: {
        type: String,
        required: true,
    },
    disabled: {
        type: Boolean,
    },
})

// Component emits using defineEmits from script setup
const emit = defineEmits(['update:modelValue', 'onChange'])

// this will exec an method attached to @change event on parent component
const onChange = (value) => {
    emit('onChange', value)
}

// this will update model value in parent component
const handleUpdate = (value) => {
    emit('update:modelValue', value)
}

</script>

<style scoped>
</style>