I have a v-select with four items to choose different dates. The last item in the select is for choosing a manual date and then I want a menu/dialog to pop open with a date picker. But I can't get that to work...

    <v-select
        v-model="dates"
        :items="items"
        clearable
        hide-details
        :label="$tc('Dates')"
    >
        <v-menu
            v-model="showDatePicker"
            :close-on-content-click="false"
        >
            <template #item="{ item, on, attrs }"
                ><v-list-item v-attrs="attrs" v-on="on">{{ item.text }}</v-list-item>
            </template>
            <v-date-picker v-model="dates" @input="showDatepicker = false" />
        </v-menu>
    </v-select>

I've tried many different things but this is the latest one. Anyone that knows how to solve this? :)