Date Picker (V-Calendar) Component

date-picker.vue

<template>
    <DatePicker
        v-model="range"
        :model-config="modelConfig"
        :startDate="startDate"
        :endDate="endDate"
        is-range
        is-required
        color="green"
    >
        <template v-slot:footer>
            <div class="bg-gray-100 text-center p-2 border-t rounded-b-lg">
                <el-button
                    plain
                    native-type="submit"
                    size="small"
                    icon="el-icon-search"
                    @click="onClick"
                >Buscar</el-button>
            </div>
        </template>

        <template v-slot="{ inputValue, inputEvents, isDragging }">
            <div class="flex flex-row items-center h-10">
                <!-- first input  -->
                <div class="relative flex-grow text-sm">
                    <svg
                        class="text-gray-600 w-4 h-full mx-2 absolute pointer-events-none"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                        />
                    </svg>
                    <input
                        class="flex-grow pl-8 pr-2 py-1 bg-transparent border rounded w-full text-gray-600 focus:outline-none"
                        :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
                        :value="inputValue.start"
                        v-on="inputEvents.start"
                    />
                </div>

                <span class="flex-shrink-0 mx-2">
                    <svg class="w-4 h-4 stroke-current text-gray-600" viewBox="0 0 24 24">
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M14 5l7 7m0 0l-7 7m7-7H3"
                        />
                    </svg>
                </span>

                <!-- second input  -->
                <div class="relative flex-grow text-sm">
                    <svg
                        class="text-gray-600 w-4 h-full mx-2 absolute pointer-events-none"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                        />
                    </svg>
                    <input
                        class="flex-grow pl-8 pr-2 py-1 bg-transparent border rounded w-full text-gray-800 focus:outline-none"
                        :value="inputValue.end"
                        v-on="inputEvents.end"
                    />
                </div>
                <div class="ml-2 my-auto">
                    <el-button
                        plain
                        native-type="submit"
                        size="mini"
                        icon="el-icon-search"
                        @click="onClick"
                    ></el-button>
                </div>
                <div class="ml-1 my-auto">
                    <slot />
                </div>
            </div>
        </template>
    </DatePicker>
</template>

<script>
import { DatePicker } from 'v-calendar'
import { watch, ref } from 'vue'

export default {
    components: {
        DatePicker,
    },

    props: {
        startDate: {
            type: [String, Number, Array, Object],
            default: null,
        },
        endDate: {
            type: [String, Number, Array, Object],
            default: null,
        },
    },

    emits: ['update:modelValue', 'click', 'setRange'],

    setup(props, { emit }) {
        const modelConfig = ref({
            type: 'string',
            mask: 'YYYY-MM-DD', // Uses 'iso' if missing
        })

        const range = ref({
            start: props.startDate,
            end: props.endDate,
        })

        watch(
            () => range.value,
            () => {
                emit('setRange', range.value)
                emit('update:modelValue', range.value)
            },
        )

        const onClick = (value) => {
            emit('click', value)
            emit('update:modelValue', range.value)
        }

        return {
            range,
            modelConfig,
            onClick,
        }
    },
}
</script>

<style>
</style>