updated Date Form Input to support nova-v3 format picker

package.json

@@ -15,17 +15,21 @@
     "babel-plugin-component": "^1.1.1",
     "cross-env": "^5.0.0",
     "element-ui": "^2.8.2",
-    "flatpickr": "^4.6.1",
+    "flatpickr": "4.6.7",
     "form-backend-validation": "^2.3.3",
     "laravel-mix": "^3.0.0",
-    "webpack": "3.12.0",
     "laravel-nova": "^1.7.0",
+    "node-sass": "6.0.1",
     "trix": "^0.12.1",
     "vue-clickaway": "^2.2.2",
     "vue-multiselect": "^2.1.6",
-    "vuepress": "^1.1.0"
+    "vuepress": "^1.1.0",
+    "webpack": "3.12.0"
   },
   "dependencies": {
     "vue": "^2.6.11"
+  },
+  "resolutions": {
+    "node-sass": "6.0.1"
   }
 }

resources/js/components/date/DateTimePicker.vue

@@ -14,65 +14,103 @@ import flatpickr from 'flatpickr'
 import 'flatpickr/dist/themes/airbnb.css'
 
 export default {
-  props: {
-    value: {
-      required: false
+    props: {
+        value: {
+            required: false
+        },
+        placeholder: {
+            type: String,
+            default: () => {
+                return moment().format('YYYY-MM-DD HH:mm:ss')
+            }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        hourIncrement: {
+            type: Number,
+            default: 1,
+        },
+        minuteIncrement: {
+            type: Number,
+            default: 5,
+        },
+        dateFormat: {
+            type: String,
+            default: 'Y-m-d H:i:S'
+        },
+        altFormat: {
+            type: String,
+            default: 'Y-m-d H:i:S',
+        },
+        twelveHourTime: {
+            type: Boolean,
+            default: false
+        },
+        enableTime: {
+            type: Boolean,
+            default: true
+        },
+        enableSeconds: {
+            type: Boolean,
+            default: true
+        },
+        firstDayOfWeek: {
+            type: Number,
+            default: 0
+        }
     },
-    placeholder: {
-      type: String,
-      default: () => {
-        return moment().format('YYYY-MM-DD HH:mm:ss')
-      }
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    dateFormat: {
-      type: String,
-      default: 'Y-m-d H:i:S'
-    },
-    twelveHourTime: {
-      type: Boolean,
-      default: false
-    },
-    enableTime: {
-      type: Boolean,
-      default: true
+
+    data: () => ({
+        flatpickr: null
+    }),
+
+    watch: {
+        value: function(newValue, oldValue) {
+            if (this.flatpickr) {
+                this.flatpickr.setDate(newValue)
+            }
+        },
     },
-    enableSeconds: {
-      type: Boolean,
-      default: true
+
+    mounted() {
+        this.$nextTick(() => this.createFlatpickr())
     },
-    firstDayOfWeek: {
-      type: Number,
-      default: 0
-    }
-  },
 
-  data: () => ({ flatpickr: null }),
+    methods: {
+        createFlatpickr() {
+            this.flatpickr = flatpickr(this.$refs.datePicker, {
+                enableTime: this.enableTime,
+                enableSeconds: this.enableSeconds,
+                onClose: this.onChange,
+                onChange: this.onChange,
+                dateFormat: this.dateFormat,
+                altInput: true,
+                altFormat: this.altFormat,
+                allowInput: true,
+                // static: true,
+                time_24hr: !this.twelveHourTime,
+                hourIncrement: this.hourIncrement,
+                minuteIncrement: this.minuteIncrement,
+                locale: {
+                    firstDayOfWeek: this.firstDayOfWeek
+                },
+            })
+        },
 
-  mounted() {
-    this.$nextTick(() => {
-      this.flatpickr = flatpickr(this.$refs.datePicker, {
-        enableTime: this.enableTime,
-        enableSeconds: this.enableSeconds,
-        onClose: this.onChange,
-        onChange: this.onChange,
-        dateFormat: this.dateFormat,
-        allowInput: true,
-        // static: true,
-        time_24hr: !this.twelveHourTime,
-        locale: { firstDayOfWeek: this.firstDayOfWeek }
-      })
-    })
-  },
+        onChange(event) {
+            this.$emit('change', this.$refs.datePicker.value)
+        },
 
-  methods: {
-    onChange(event) {
-      this.$emit('change', this.$refs.datePicker.value)
-    }
-  }
+        clear() {
+            this.flatpickr.clear()
+        },
+    },
+
+    beforeDestroy() {
+        this.flatpickr.destroy()
+    },
 }
 </script>
 

resources/js/components/date/FormField.vue

@@ -1,25 +1,19 @@
 <template>
-  <r64-default-field
-    :hide-field="hideField"
-    :field="field"
-    :hide-label="hideLabelInForms"
-    :field-classes="fieldClasses"
-    :wrapper-classes="wrapperClasses"
-    :label-classes="labelClasses"
-  >
+  <r64-default-field :hide-field="hideField" :field="field" :hide-label="hideLabelInForms" :field-classes="fieldClasses" :wrapper-classes="wrapperClasses" :label-classes="labelClasses">
     <template slot="field">
-      <DateTimePicker
+      <date-time-picker
+        :alt-format="pickerDisplayFormat"
+        :class="[errorClasses, inputClasses]"
+        :dateFormat="pickerFormat"
+        :disabled="isReadonly"
         :dusk="field.attribute"
-        :name="field.name"
-        :value="value"
-        dateFormat="Y-m-d"
-        :placeholder="placeholder"
-        :enable-time="false"
         :enable-seconds="false"
+        :enable-time="false"
         :first-day-of-week="firstDayOfWeek"
-        :class="[errorClasses, inputClasses]"
+        :name="field.name"
+        :placeholder="placeholder"
+        :value="value"
         @change="handleChange"
-        :disabled="isReadonly"
       />
 
       <p
@@ -76,9 +70,20 @@ export default {
     },
 
     placeholder() {
-      const format = this.field.format ? this.field.format : 'YYYY-MM-DD'
-      return this.field.placeholder || moment().format(format)
-    }
-  }
+      return this.field.placeholder || moment().format(this.format)
+    },
+
+    format() {
+      return this.field.format || 'YYYY-MM-DD'
+    },
+
+    pickerFormat() {
+      return this.field.pickerFormat || 'Y-m-d'
+    },
+
+    pickerDisplayFormat() {
+      return this.field.pickerDisplayFormat || 'Y-m-d'
+    },
+  },
 }
 </script>

src/Configurable.php

@@ -12,7 +12,7 @@ trait Configurable
      *
      * @var string
      */
-    public $wrapperClasses = 'flex border-b border-40';
+    public $wrapperClasses = 'fuckumofo flex border-b border-40';
 
     /**
      * The base field classes of the field.