Add @vuepic/vue-datepicker for birth date in onboarding

client/package-lock.json

@@ -15,6 +15,7 @@
         "@urql/exchange-graphcache": "^6.3.2",
         "@urql/introspection": "^1.0.2",
         "@urql/vue": "^1.1.2",
+        "@vuepic/vue-datepicker": "^8.8.1",
         "@vueuse/core": "^10.9.0",
         "@vueuse/router": "^10.9.0",
         "cypress": "^12.14.0",
@@ -8212,6 +8213,26 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.1.tgz",
+      "integrity": "sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -26717,6 +26738,21 @@
         "@vue/language-core": "1.8.1"
       }
     },
+    "@vuepic/vue-datepicker": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.1.tgz",
+      "integrity": "sha512-8ehfUz1m69Vuc16Pm4ukgb3Mg1VT14x4EsG1ag4O/qbSNRWztTo+pUV4JnFt0FGLl5gGb6NXlxIvR7EjLgD7Gg==",
+      "requires": {
+        "date-fns": "^3.6.0"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+          "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+        }
+      }
+    },
     "@vueuse/core": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",

client/package.json

@@ -27,6 +27,7 @@
     "@urql/exchange-graphcache": "^6.3.2",
     "@urql/introspection": "^1.0.2",
     "@urql/vue": "^1.1.2",
+    "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^10.9.0",
     "@vueuse/router": "^10.9.0",
     "cypress": "^12.14.0",

client/src/components/onboarding/PersonalAddress.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } 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 dayjs from "dayjs";
 
 const props = defineProps<{
   modelValue: {
@@ -225,14 +228,20 @@ const address = computed({
         {{ $t("a.Geburtsdatum") }}
       </label>
       <div class="mt-2">
-        <input
+        <VueDatePicker
-          id="birth-date"
           v-model="address.birth_date"
-          type="text"
+          format="dd.MM.yyyy"
-          name="phone"
+          no-today
-          autocomplete="birth-date"
+          model-type="yyyy-MM-dd"
-          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+          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"
+        ></VueDatePicker>
       </div>
     </div>
   </div>