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

coscine/issues#1197

src/components/InputDatePicker.vue

 <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>