Make `ItDatePicker` component

client/src/components/onboarding/PersonalAddress.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useEntities } from "@/services/entities";
-import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { t } from "i18next";
-import { useUserStore } from "@/stores/user";
+import ItDatePicker from "@/components/ui/ItDatePicker.vue";
 
 const props = defineProps<{
   modelValue: {
@@ -25,7 +24,6 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"]);
 
 const { countries } = useEntities();
-const userStore = useUserStore();
 
 const paymentMethods = [
   { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
@@ -234,40 +232,8 @@ const address = computed({
         {{ $t("a.Geburtsdatum") }}
       </label>
       <div class="mt-2">
-        <VueDatePicker
+        <ItDatePicker v-model="address.birth_date"></ItDatePicker>
-          v-model="address.birth_date"
-          format="dd.MM.yyyy"
-          no-today
-          model-type="yyyy-MM-dd"
-          name="birth-date"
-          max-date="2007-01-01"
-          prevent-min-max-navigation
-          required
-          :enable-time-picker="false"
-          text-input
-          placeholder="15.06.1982"
-          start-date="1982-01-01"
-          :locale="userStore.language"
-          :cancel-text="$t('a.Abbrechen')"
-          :select-text="$t('a.Auswählen')"
-        ></VueDatePicker>
       </div>
     </div>
   </div>
 </template>
-
-<style>
-/* Theming for date picker */
-.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>

client/src/components/personalProfile/ProfileEdit.vue

@@ -21,6 +21,10 @@ const formData = ref({
   postal_code: user.postal_code,
   city: user.city,
   country_code: user.country?.country_code,
+
+  phone_number: user.phone_number,
+  birth_date: user.birth_date,
+
   organisation: user.organisation,
   organisation_street: user.organisation_street,
   organisation_street_number: user.organisation_street_number,

client/src/components/ui/ItDatePicker.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import VueDatePicker from "@vuepic/vue-datepicker";
+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>