Commonify Date and Time component into BaseDate component

ui/components/controls/BaseDate.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="{'form-group': !onlyInput}">
+    <label v-if="!onlyInput">{{ docfield.label }}</label>
+    <flat-pickr
+      class="form-control"
+      :value="value"
+      :config="config"
+      @on-change="emitChange">
+    </flat-pickr>
+  </div>
+</template>
+<script>
+import flatPickr from 'vue-flatpickr-component';
+import Data from './Data';
+
+export default {
+  extends: Data,
+  props: ['config'],
+  components: {
+    flatPickr
+  },
+  methods: {
+    emitChange(dates, dateString) {
+      this.$emit('change', dateString);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "~flatpickr/dist/flatpickr.css";
+</style>

ui/components/controls/Date.vue

@@ -1,29 +1,13 @@
-<template>
-  <div :class="{'form-group': !onlyInput}">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      class="form-control"
-      @on-change="emitChange">
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
+import BaseDate from './BaseDate';
-import Data from './Data';
 
 export default {
-  extends: Data,
+  extends: BaseDate,
-  components: {
+  props: {
-    flatPickr
+    config: {
-  },
+      type: Object,
-  methods: {
+      default: () => ({})
-    emitChange(dates, dateString) {
-      this.$emit('change', dateString);
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>

ui/components/controls/Time.vue

@@ -1,39 +1,16 @@
-<template>
-  <div :class="{ 'form-group': !onlyInput }">
-    <label v-if="!onlyInput">{{ docfield.label }}</label>
-    <flat-pickr
-      :value="value"
-      :config="config"
-      class="form-control"
-      @on-change="emitChange"
-    >
-    </flat-pickr>
-  </div>
-</template>
 <script>
-import flatPickr from 'vue-flatpickr-component';
+import BaseDate from './BaseDate';
-import Data from './Data';
 
 export default {
-  extends: Data,
+  extends: BaseDate,
-  data() {
+  props: {
-    return {
+    config: {
-      config: {
+      type: Object,
+      default: () => ({
         enableTime: true,
         noCalendar: true
-      }
+      })
-    };
-  },
-  components: {
-    flatPickr
-  },
-  methods: {
-    emitChange(times, timeString) {
-      this.$emit('change', timeString);
     }
   }
 };
 </script>
-<style lang="scss">
-@import "flatpickr/dist/flatpickr.css";
-</style>