Commit 8842e9fb authored by Marcel Nellesen's avatar Marcel Nellesen
Browse files

Merge branch 'Hotfix/1197-Datepicker' into 'master'

Use the Datepicker from Vue.js for the Form-Generator

See merge request coscine/vue/form-generator!45
parents 4c114f41 5d4e3a25
{
"name": "@coscine/form-generator",
"version": "1.8.4",
"version": "1.9.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -45,7 +45,6 @@
"vue-i18n": "^8.22.0",
"vue-material-design-icons": "^4.9.0",
"vue-multiselect": "^2.1.6",
"vuejs-datepicker": "^1.6.2",
"vuelidate": "^0.7.5"
},
"devDependencies": {
......
<template>
<datepicker
:id="cssId"
:language="datepickerLanguage[this.languageCode]"
:calendar-button="true"
calendar-button-icon="material-icons"
calendar-button-icon-content="date_range"
v-model="selectedDate"
:bootstrap-styling="true"
:full-month-name="true"
format="dd MMMM yyyy"
@input="updateFixedValuesOverwrite"
:disabled="disabledMode || locked"
:required="required"
/>
<div id="datepicker">
<b-form-datepicker
:id="cssId"
size="sm"
v-model="selectedDate"
:locale="languageCode"
:date-format-options="{ year: 'numeric', month: 'long', day: 'numeric' }"
:disabled="disabledMode || locked"
@input="updateFixedValuesOverwrite"
:required="required"
calendar-width="100%"
></b-form-datepicker>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';
import { de, en } from 'vuejs-datepicker/dist/locale';
import FieldReader from '@/util/FieldReader';
export default Vue.extend({
......@@ -43,14 +39,12 @@ export default Vue.extend({
},
data() {
return {
datepickerLanguage: {
de,
en,
},
selectedDate: new Date(),
formatDate: '',
selectedDate: '',
};
},
props: {
languageCode: String,
cssId: String,
invisible: Boolean,
locked: Boolean,
......@@ -65,9 +59,6 @@ export default Vue.extend({
updateFixedValues: Function,
v: Object,
},
components: {
Datepicker,
},
methods: {
replacePlaceholder() {
if (this.checkDataField(this.formData, this.nodeName)) {
......@@ -75,19 +66,19 @@ export default Vue.extend({
if (this.fixedValueMode) {
return;
}
this.selectedDate = new Date();
this.selectedDate = new Date().toString();
} else if (this.formData[this.nodeName][0]['value'] === '') {
this.selectedDate = new Date();
this.selectedDate = '';
} else {
this.selectedDate = new Date(
this.formData[this.nodeName][0]['value']
);
this.selectedDate =
this.formData[this.nodeName][0]['value']
;
}
this.$set(
this.formData[this.nodeName][0],
'value',
this.selectedDate.toISOString().slice(0, 10)
this.selectedDate,
);
}
},
......@@ -96,21 +87,25 @@ export default Vue.extend({
this.formData,
this.v,
this.nodeName,
this.selectedDate.toISOString().slice(0, 10),
this.selectedDate,
this.$set
);
this.updateFixedValues();
},
onContext(ctx: any) {
this.formatDate= ctx.selectedFormatted
},
},
});
</script>
<style>
.vdp-datepicker .form-control {
background-color: #ffffff;
}
.vdp-datepicker__calendar-button {
height: calc(1.4em + 0.75rem + 2px);
#datepicker .btn {
margin: 0;
background-color: #eceded;
border: 1px solid #cfd1d2;
border-radius: 0;
}
</style>
......
declare module 'vuejs-datepicker';
declare module 'vuejs-datepicker/dist/locale';
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment