V-Calendar date picker

date-picker.vue

<template>
    <div>
        <div class="date-examples">
            <div>
                <DatePicker
                    v-model="date"
                    :is-range="isRange"
                    :model-config="modelConfig"
                    is-required
                >
                    <template v-slot="{ inputValue, inputEvents }">
                        <template v-if="isRange">
                            <div class="flex justify-center items-center">
                                <input
                                    :value="inputValue.start"
                                    v-on="inputEvents.start"
                                    class="
                                        border
                                        px-2
                                        py-1
                                        w-32
                                        rounded
                                        focus:outline-none
                                        focus:border-indigo-300
                                    "
                                />
                                <svg
                                    class="w-4 h-4 mx-2"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M14 5l7 7m0 0l-7 7m7-7H3"
                                    />
                                </svg>
                                <input
                                    :value="inputValue.end"
                                    v-on="inputEvents.end"
                                    class="
                                        border
                                        px-2
                                        py-1
                                        w-32
                                        rounded
                                        focus:outline-none
                                        focus:border-indigo-300
                                    "
                                />
                            </div>
                        </template>
                        <template v-else>
                            <input :value="inputValue" v-on="inputEvents" />
                        </template>
                    </template>
                </DatePicker>
                <div class="flex m-auto justify-center mt-5">
                    <el-button @click="seeData" class="">Click</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { DatePicker } from 'v-calendar'
import moment from 'moment'

export default {
    name: 'App',
    components: {
        DatePicker,
    },
    data() {
        return {
            date: {
                start: moment().format('YYYY-MM-DD'),
                end: moment().format('YYYY-MM-DD'),
            },
            modelConfig: {
                type: 'string',
                mask: 'YYYY-MM-DD', // Uses 'iso' if missing
            },
            isRange: true,
        }
    },
    methods: {
        seeData() {
            console.log(this.date.start)
            console.log(this.date.end)
        },
    },
    watch: {
        isRange(val) {
            if (val) {
                this.date = {
                    start: new Date(),
                    end: new Date(),
                }
            } else {
                this.date = new Date()
            }
        },
    },
}
</script>

<style scoped>
</style>