Simple date input (#38)

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -181,6 +181,17 @@
         >
           Disable future dates
         </v-checkbox>
+
+        <v-checkbox v-model="field.simple_date_input"
+                    name="simple_date_input" class="mb-3"
+                    @input="onFieldSimpleDateInputChange"
+        >
+          Simple date input
+        </v-checkbox>
+        <select-input v-if="field.simple_date_input" v-model="field.simple_date_input_format" name="simple_date_input_format" 
+                      class="mt-4" :form="field" :options="dateFormatOptions"
+                      label="Date format"
+        />
       </div>
 
       <!-- select/multiselect Options   -->
@@ -412,6 +423,16 @@ export default {
       return this.field[this.field.type].options.map(option => {
         return option.name
       }).join("\n")
+    },
+    dateFormatOptions () {
+      if (this.field.type !== 'date') return []
+      let formats = ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD']
+      return formats.map((format) => {
+        return {
+          name: format,
+          value: format
+        }
+      })
     }
   },
 
@@ -421,6 +442,9 @@ export default {
     if(['text','number','url','email','phone_number'].includes(this.field.type) && !this.field.max_char_limit){
       this.field.max_char_limit = 2000
     }
+    if(this.field.type == 'date' && !this.field.simple_date_input_format){
+      this.field.simple_date_input_format = this.dateFormatOptions[0]['value']
+    }
   },
 
   methods: {
@@ -455,6 +479,7 @@ export default {
       if (this.field.date_range) {
         this.$set(this.field, 'with_time', false)
         this.$set(this.field, 'prefill_today', false)
+        this.$set(this.field, 'simple_date_input', false)
       }
     },
     onFieldWithTimeChange (val) {
@@ -462,6 +487,7 @@ export default {
       this.$set(this.field, 'use_am_pm', false)
       if (this.field.with_time) {
         this.$set(this.field, 'date_range', false)
+        this.$set(this.field, 'simple_date_input', false)
       }
     },
     onFieldGenUIdChange (val) {
@@ -529,6 +555,13 @@ export default {
         this.$set(this.field, 'disable_past_dates', false)
         this.$set(this.field, 'prefill_today', false)
       }
+    },
+    onFieldSimpleDateInputChange (val) {
+      this.$set(this.field, 'simple_date_input', val)
+      if (this.field.simple_date_input) {
+        this.$set(this.field, 'with_time', false)
+        this.$set(this.field, 'date_range', false)
+      }
     }
   }
 }