73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<script setup>
|
|
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
|
|
import 'v-calendar/dist/style.css'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Date,
|
|
default: null
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: "date"
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:model-value', 'close'])
|
|
|
|
const colorMode = useColorMode()
|
|
|
|
const isDark = computed(() => colorMode.value === 'dark')
|
|
|
|
const date = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:model-value', value)
|
|
emit('close')
|
|
}
|
|
})
|
|
|
|
const selectToday = () => {
|
|
emit('update:model-value', new Date())
|
|
emit('close')
|
|
}
|
|
|
|
const attrs = [{
|
|
key: 'today',
|
|
highlight: {
|
|
fillMode: 'outline',
|
|
},
|
|
dates: new Date()
|
|
}]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3">
|
|
<VCalendarDatePicker
|
|
show-weeknumbers
|
|
v-model="date"
|
|
:mode="props.mode"
|
|
is24hr
|
|
transparent
|
|
borderless
|
|
color="green"
|
|
:attributes="attrs"
|
|
:is-dark="isDark"
|
|
title-position="left"
|
|
trim-weeks
|
|
:first-day-of-week="2"
|
|
/>
|
|
|
|
<div class="flex justify-end px-2 pb-2">
|
|
<UButton
|
|
size="xs"
|
|
color="gray"
|
|
variant="soft"
|
|
icon="i-heroicons-calendar-days"
|
|
label="Heute"
|
|
@click="selectToday"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|