Simple date input (#38)

app/Http/Requests/UserFormRequest.php

@@ -104,6 +104,8 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'properties.*.prefill_today' => 'boolean|nullable',
             'properties.*.disable_past_dates' => 'boolean|nullable',
             'properties.*.disable_future_dates' => 'boolean|nullable',
+            'properties.*.simple_date_input' => 'boolean|nullable',
+            'properties.*.simple_date_input_format' => 'string|nullable',
 
             // Select / Multi Select field
             'properties.*.allow_creation' => 'boolean|nullable',

package.json

@@ -16,6 +16,7 @@
     "@sentry/vue": "^6.11.0",
     "axios": "^0.21.1",
     "chart.js": "^3.7.1",
+    "cleave.js": "^1.6.0",
     "clone-deep": "^4.0.1",
     "date-fns": "^2.28.0",
     "debounce": "^1.2.1",

resources/js/components/forms/SimpleDateInput.vue

@@ -0,0 +1,99 @@
+<template>
+  <div :class="wrapperClass">
+    <label v-if="label" :for="id?id:name"
+           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </label>
+    <input :id="id?id:name" v-model="compVal" v-cleave="cleaveOptions" :disabled="disabled"
+                  :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
+                  :style="inputStyle" :name="name"
+                  :placeholder="placeholder"
+    />
+    <small v-if="help" :class="theme.default.help">
+    <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
+  </div>
+</template>
+
+<script>
+import inputMixin from '~/mixins/forms/input'
+import Cleave from 'cleave.js';
+
+export default {
+  name: 'SimpleDateInput',
+  mixins: [inputMixin],
+
+  props: {
+    dateFormat: { type: String, default: 'DD/MM/YYYY' },
+  },
+
+  directives: {
+    cleave: {
+      inserted: (el, binding) => {
+        el.cleave = new Cleave(el, binding.value || {})
+      },
+      update: (el) => {
+        const event = new Event('input', {bubbles: true});
+        setTimeout(function () {
+            el.value = el.cleave.properties.result
+            el.dispatchEvent(event)
+        }, 100);
+      }
+    }
+  },
+
+  data: () => ({
+
+  }),
+
+  computed: {
+    cleaveOptions () {
+      let datePattern = ['d','m','Y']
+      if(this.dateFormat == 'MM/DD/YYYY'){
+        datePattern = ['m','d','Y']
+      }else if(this.dateFormat == 'YYYY/MM/DD'){
+        datePattern = ['Y','m','d']
+      }
+      return {
+        date: true,
+        delimiter: '/',
+        datePattern: datePattern
+      }
+    }
+  },
+
+  watch: {
+    color: {
+      handler () {
+        this.setInputColor()
+      },
+      immediate: true
+    }
+  },
+
+  mounted () {
+    this.setInputColor()
+  },
+
+  methods: {
+    /**
+     * Pressing enter won't submit form
+     * @param event
+     * @returns {boolean}
+     */
+    onEnterPress (event) {
+      event.preventDefault()
+      return false
+    },
+    setInputColor () {
+      if (this.$refs.datepicker) {
+        const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
+        dateInput.style.setProperty('--tw-ring-color', this.color)
+      }
+    }
+  }
+}
+</script>

resources/js/components/forms/index.js

@@ -17,6 +17,7 @@ import DateInput from './DateInput';
 import RatingInput from './RatingInput';
 import FlatSelectInput from './FlatSelectInput';
 import ToggleSwitchInput from './ToggleSwitchInput';
+import SimpleDateInput from './SimpleDateInput';
 
 // Components that are registered globaly.
 [
@@ -36,7 +37,8 @@ import ToggleSwitchInput from './ToggleSwitchInput';
   DateInput,
   RatingInput,
   FlatSelectInput,
-  ToggleSwitchInput
+  ToggleSwitchInput,
+  SimpleDateInput
 ].forEach(Component => {
   Vue.component(Component.name, Component)
 })

resources/js/components/open/forms/OpenForm.vue

@@ -348,6 +348,9 @@ export default {
       if (field.type === 'checkbox' && field.use_toggle_switch) {
         return 'ToggleSwitchInput'
       }
+      if (field.type === 'date' && field.simple_date_input) {
+        return 'SimpleDateInput'
+      }
       return this.fieldComponents[field.type]
     },
     getFieldClasses (field) {
@@ -408,6 +411,9 @@ export default {
         }else if (field.disable_future_dates) {
           inputProperties.disableFutureDates = true
         }
+        if (field.simple_date_input && field.simple_date_input_format) {
+          inputProperties.dateFormat = field.simple_date_input_format
+        }
       } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
         inputProperties.multiple = (field.multiple !== undefined && field.multiple)
         inputProperties.mbLimit = 5

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)
+      }
     }
   }
 }