✨ The default value can be displayed in the date field in renderer

Ref di/vue-formbuilder#58

src/components/fields/UsfDateTime/UsfDateTime.vue

 <template>
   <v-menu
-      v-show="editorMode || visible"
-      v-if="editorMode || exist"
-      v-model="menu.isVisible"
-      offset-y
-      :close-on-content-click="menu.closeOnContentClick"
-      :min-width="menu.minWidth"
+    v-show="editorMode || visible"
+    v-if="editorMode || exist"
+    v-model="menu.isVisible"
+    offset-y
+    :close-on-content-click="menu.closeOnContentClick"
+    :min-width="menu.minWidth"
   >
     <template #activator="{ on }">
       <v-text-field
-          :value="getDateOrTimeFormat(value)"
-          :class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
-          :label="label"
-          :hint="translated(fieldId, 'hint')"
-          :persistent-hint="field.persistentHint"
-          :prepend-icon="textFieldPrependIcon"
-          readonly
-          clearable
-          :rules="[handleRequired]"
-          v-on="on"
+        :value="getDateOrTimeFormat(value)"
+        :class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
+        :label="label"
+        :hint="translated(fieldId, 'hint')"
+        :persistent-hint="field.persistentHint"
+        :prepend-icon="textFieldPrependIcon"
+        readonly
+        clearable
+        :rules="[handleRequired]"
+        :disabled="fieldOnReadOnly"
+        v-on="on"
       >
         <template #append-outer>
           <v-icon
-              v-if="field.repeatable"
-              @click="repeat"
+            v-if="field.repeatable"
+            @click="repeat"
           >
             mdi-plus
           </v-icon>
@@ -32,33 +33,35 @@
     </template>
 
     <v-date-picker
-        v-if="field.type === 'date'"
-        :ref="pickerRef"
-        v-model="value"
-        :locale="field.locale"
-        :min="dateMin"
-        :max="dateMax"
-        no-title
-        @input="menu.isVisible = false"
-        color="primary"
+      v-if="field.type === 'date'"
+      :ref="pickerRef"
+      v-model="value"
+      :locale="field.locale"
+      :min="dateMin"
+      :max="dateMax"
+      no-title
+      @input="menu.isVisible = false"
+      color="primary"
     />
     <v-time-picker
-        v-if="field.type === 'time'"
-        :ref="pickerRef"
-        v-model="value"
-        :locale="field.locale"
-        @input="menu.isVisible = false"
-        :format="timeFormat"
-        color="primary"
+      v-if="field.type === 'time'"
+      :ref="pickerRef"
+      v-model="value"
+      :locale="field.locale"
+      @input="menu.isVisible = false"
+      :format="timeFormat"
+      color="primary"
     />
   </v-menu>
 </template>
 
 <script lang="ts">
-import {usfFieldMixin, usfHandleConditional} from '../../../mixins'
-import dayjs from '../../../utils/dayjs'
-import Vue from 'vue'
-import {UnitTypeLongPlural} from 'dayjs';
+import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
+import dayjs from '@form-plugin/utils/dayjs';
+import Vue from 'vue';
+import { UnitTypeLongPlural } from 'dayjs';
+import { Field } from '#form-plugin/models/form';
+import { mapGetters } from 'vuex';
 
 interface ComponentData {
   menu: {
@@ -74,6 +77,7 @@ export default Vue.extend({
   mixins: [
     usfFieldMixin,
     usfHandleConditional,
+    usfDefaultTokenMixin,
   ],
 
   props: {
@@ -93,33 +97,34 @@ export default Vue.extend({
   }),
 
   computed: {
+    ...mapGetters('form', ['getFieldById']),
     textFieldPrependIcon(): string {
-      return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline'
+      return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline';
     },
     pickerRef(): string {
-      return `${this.field.type}Picker`
+      return `${this.field.type}Picker`;
     },
     dateMin(): undefined | string {
-      return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min')
+      return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min');
     },
     dateMax() {
-      return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max')
+      return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max');
     },
     timeFormat() {
-      return this._globaleLocale === 'fr' ? '24hr' : 'ampm'
+      return this._globaleLocale === 'fr' ? '24hr' : 'ampm';
     },
   },
 
   watch: {
-    'field.type': function () {
-      this.field.value = ''
+    'field.type': function() {
+      this.field.value = '';
     },
-    'menu.isVisible': function (val) {
+    'menu.isVisible': function(val) {
       if (val && this.field.type === 'date' && this.field.style === 'standard') {
-        setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'))
+        setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'));
       }
       if (val && this.field.type === 'date' && this.field.style === 'birthday') {
-        setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'))
+        setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'));
       }
     },
   },
@@ -134,42 +139,44 @@ export default Vue.extend({
      * @return {string | undefined}
      */
     getDateFromDelta(
-        delta: number | undefined,
-        unit: UnitTypeLongPlural | undefined,
-        type: 'max' | 'min',
+      delta: number | undefined,
+      unit: UnitTypeLongPlural | undefined,
+      type: 'max' | 'min',
     ): undefined | string {
       if (unit) {
-        const now = dayjs()
+        const now = dayjs();
 
         if (delta === 0) {
-          return now.toISOString()
+          return now.toISOString();
         }
 
         return (type === 'max' && this.field.maxDateFuture) || (type === 'min' && this.field.minDateFuture)
-            ? now.add(delta, unit)
-                 .toISOString()
-            : now.subtract(delta, unit)
-                 .toISOString()
+          ? now.add(delta, unit)
+               .toISOString()
+          : now.subtract(delta, unit)
+               .toISOString();
       }
 
-      return undefined
+      return undefined;
     },
     getDateOrTimeFormat(dateOrTime: string): string {
-      if (!dateOrTime) return dateOrTime
+      console.log(this.field);
+
+      if (!dateOrTime) return dateOrTime;
 
       if (this.field.type === 'time') {
         return this._globaleLocale === 'fr'
-            ? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
-            : dayjs(dateOrTime, 'h:mm').format('hh:mm a')
+          ? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
+          : dayjs(dateOrTime, 'h:mm').format('hh:mm a');
       }
 
       const format = this._globaleLocale === 'fr'
-          ? 'DD/MM/YYYY'
-          : 'YYYY-MM-DD'
-      return dayjs(dateOrTime).format(format)
+        ? 'DD/MM/YYYY'
+        : 'YYYY-MM-DD';
+      return dayjs(dateOrTime).format(format);
     },
   },
-})
+});
 </script>
 
 <style lang="scss" scoped>

src/components/fields/UsfText/UsfText.vue

@@ -35,14 +35,13 @@
 </template>
 
 <script lang="ts">
-import { usfFieldMixin, usfHandleConditional } from '../../../mixins';
+import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 
 export default Vue.extend({
   name: 'UsfText',
 
-  mixins: [usfFieldMixin, usfHandleConditional],
+  mixins: [usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin],
 
   props: {
     editorMode: {
@@ -53,7 +52,6 @@ export default Vue.extend({
   },
 
   computed: {
-    ...mapGetters('form', ['autoCompletionIsActive']),
     rules(): (boolean | string)[] {
       const rules = [
         this.handleRequired,
@@ -78,9 +76,6 @@ export default Vue.extend({
         ? `${this.field.label} doit être inférieur ou égal à ${this.field.max}`
         : `${this.field.label} doit comporter ${this.field.max} caractères ou moins`;
     },
-    fieldOnReadOnly(): boolean {
-      return !!this.field.defaultTokenValue && this.autoCompletionIsActive;
-    },
   },
 
   mounted() {
@@ -89,17 +84,6 @@ export default Vue.extend({
     }
   },
 
-  watch: {
-    autoCompletionIsActive: function() {
-      if (this.autoCompletionIsActive) {
-        this.$store.dispatch('submission/updateValue', {
-          key: this.field.name,
-          value: this.user[this.field.defaultTokenValue],
-        });
-      }
-    },
-  },
-
   methods: {
     handleMin(): boolean | string {
       const test = this.field.type === 'number'

src/mixins/index.ts

 import usfFieldMixin from './usfFieldMixin';
 import usfHandleConditional from './usfHandleConditional';
 import usfFieldWithOptions from './UsfFieldWithOptions.js';
+import usfDefaultTokenMixin from './usfDefaultTokenMixin';
 
 export {
-  usfFieldMixin,
-  usfHandleConditional,
-  usfFieldWithOptions,
+    usfFieldMixin,
+    usfHandleConditional,
+    usfFieldWithOptions,
+    usfDefaultTokenMixin,
 };

src/mixins/usfDefaultTokenMixin.ts

+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+
+export default Vue.extend({
+    computed: {
+        ...mapGetters('form', ['autoCompletionIsActive']),
+        fieldOnReadOnly(): boolean {
+            return !!this.field.defaultTokenValue && this.autoCompletionIsActive;
+        },
+    },
+    watch: {
+        autoCompletionIsActive: function() {
+            if (this.autoCompletionIsActive) {
+                let value = this.user[this.field.defaultTokenValue]
+
+                if (this.field.component === 'UsfDateTime') {
+                    value = value.replace(/^(\d{4})(\d{2})(\d{2}).*$/, '$1-$2-$3')
+                }
+
+                this.$store.dispatch('submission/updateValue', {
+                    key: this.field.name,
+                    value,
+                });
+            }
+        },
+    },
+});