No example for clear button

[Pnsadeghy]

Hi

We have example for button in datepicker

https://vcalendar.io/calendar/layouts.html#footer

But clear button have no example code!

I tried to rebuild that but manually clear the value not update correctly!

[lucascnunes]

You can define the value as null to clear it.

<template>
    <div>
        <VCalendar ref="calendar">
            <template #footer>
                <div class="w-full px-4 pb-3">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold w-full px-3 py-1 rounded-md"
                        @click="clearCalendar">
                        Clear Calendar
                    </button>
                </div>
            </template>
        </VCalendar>

        <VDatePicker v-model="date" mode="date">
            <template #footer>
                <div class="w-full px-4 pb-3">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold w-full px-3 py-1 rounded-md"
                        @click="clearDate">
                        Clear Date
                    </button>
                </div>
            </template>
        </VDatePicker>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const calendar = ref(new Date());
const date = ref(new Date());

function clearCalendar() {
    calendar.value = null;
}

function clearDate() {
    date.value = null;
}
</script>