61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useUserStore } from "@/stores/user";
|
|
import VueDatePicker from "@vuepic/vue-datepicker";
|
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
import { defineProps, withDefaults, defineModel } from "vue";
|
|
|
|
const model = defineModel<string>();
|
|
|
|
export interface Props {
|
|
noToday?: boolean;
|
|
required?: boolean;
|
|
placeholder?: string;
|
|
startDate?: string;
|
|
maxDate?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
required: false,
|
|
placeholder: "15.06.1982",
|
|
startDate: "1982-01-01",
|
|
maxDate: "2007-01-01",
|
|
});
|
|
|
|
const userStore = useUserStore();
|
|
</script>
|
|
|
|
<template>
|
|
<VueDatePicker
|
|
v-model="model"
|
|
format="dd.MM.yyyy"
|
|
model-type="yyyy-MM-dd"
|
|
name="date"
|
|
prevent-min-max-navigation
|
|
:required="props.required"
|
|
:enable-time-picker="false"
|
|
text-input
|
|
:no-today="props.noToday"
|
|
:max-date="props.maxDate"
|
|
:placeholder="props.placeholder"
|
|
:start-date="props.startDate"
|
|
:locale="userStore.language"
|
|
:cancel-text="$t('a.Abbrechen')"
|
|
:select-text="$t('a.Auswählen')"
|
|
></VueDatePicker>
|
|
</template>
|
|
|
|
<style>
|
|
.dp__theme_light {
|
|
--dp-text-color: #585f63;
|
|
--dp-primary-color: #41b5fa;
|
|
--dp-border-color-focus: #3d6dcc;
|
|
}
|
|
|
|
:root {
|
|
--dp-font-family: "Buenos Aires" sans-serif;
|
|
--dp-border-radius: none;
|
|
--dp-font-size: 0.875rem;
|
|
--dp-cell-border-radius: none;
|
|
}
|
|
</style>
|