Shadcn-vue SimpleCalendar

SimpleCalendar.vue

<template>
	<Popover :open="openDate" @update:open="(value) => openDate = value">
		<PopoverTrigger as-child>
			<div class="relative w-full">
				<Button variant="outline" class="w-full no-ring relative flex justify-start">
					<div class="text-muted-foreground z-1" v-if="!value"> {{ title }} </div>
					<div class="z-1" v-if="value"> {{ `${temp}` }} </div>
				</Button>
				<Icon icon="lucide:delete" class="absolute z-2 top-0 bottom-0 right-2 w-9! px-2 cursor-pointer h-full! transition hover:text-red-500" 
					@click.stop="() => {
						value = null 
					}" v-if="value" />
			</div>
		</PopoverTrigger>                    
		<PopoverContent class="w-auto p-0">
			<Calendar
				:min-value="minDateValue"
				@update:model-value="v => {
					value = v?.toString() ?? null
					openDate = false
				}" 
				:locale="'de'"
				:weekStartsOn="0" 
				initial-focus />
		</PopoverContent>
	</Popover>  
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import helper from '~/plugins/helper'

import { today, parseDate } from '@internationalized/date'
import moment from 'moment'

const props = defineProps({
	modelValue: {},
	title: {
		type: String,
		default: "Datum auswählen"
	},
	showIcon: {
		type: Boolean,
		default: false,
	},
	minDate: {
		default: null,
	}
})

const emits = defineEmits(['update:modelValue'])

const openDate 		= ref(false)
const minDateValue 	= computed( () => {
	if( typeof props.minDate == 'boolean' )
		return props.minDate ? today() : null
	
	if( typeof props.minDate == 'string' && props.minDate.includes('-') )
		return parseDate(props.minDate)

	if( typeof props.minDate == 'object' )
		return props.minDate ?? null

	return null
})

const temp 	= computed( () => value.value ? helper.getDate(value.value) : null )
const value = computed({
	get: () => props.modelValue,
	set: (value) => {
		emits('update:modelValue', value)
	}
})

</script>