ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Daniel Egger 2024-07-02 14:36:45 +02:00
parent 4f58415ff5
commit b58a7313a8
3 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/package-lock.json generated
View File

@ -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",

1
client/package.json
View File

@ -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",

25
client/src/components/onboarding/PersonalAddress.vue
View File

@ -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
id="birth-date"
<VueDatePicker
v-model="address.birth_date"
type="text"
name="phone"
autocomplete="birth-date"
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"
/>
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"
></VueDatePicker>
</div>
</div>
</div>