The timepicker is disabled if the v-model for it is set to NULL.

[rfawesome21]

<template>
    <VDatePicker v-model="time" mode="time" :timezone="timezone">
        <template v-slot="{ inputValue, inputEvents }">
            <div class='relative w-auto label-input' data-cy="date-input-field">
                <input :id="id"
                       class="h-11 w-full"
                       :value="inputValue"
                       v-on="inputEvents"
                       required />
            </div>
        </template>
    </VDatePicker>
</template>

<script>
export default {
    name: "InputTimePicker.vue",
    props: {},
    data() {
        return {
            time: null,
            id: '',
            timezone: 'UTC',
            attrs: [
                {
                    key: 'today',
                    bar: true,
                    dates: new Date(),
                },
            ],
        };
    },
}
</script>

[chuchiperriman]

Same problem here. Any workaround?

[noook]

The culprit is a css rule:

.vc-time-picker.vc-invalid {
    pointer-events: none;
    opacity: 0.5;
}

I believe this is overridable, unsetting pointer-event: none allows using the timepicker but does not seem to update the value. I'm digging and will update this post when I'll find a way

cc @chuchiperriman