Added input mask

techouse · May 14, 2019 · 4e8c483 · 4e8c483
1 parent c0f17e9
commit 4e8c483
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/field.js": "/js/field.js?id=91321870b2d927200133",
+    "/js/field.js": "/js/field.js?id=4c62f3dd86681762ac45",
     "/css/field.css": "/css/field.css?id=f8156e73494b4bfc878f"
 }
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
         "laravel-nova": "^1.0",
         "moment": "^2.24.0",
         "postcss-discard-comments": "^4.0.2",
-        "vue-template-compiler": "^2.6.10"
+        "vue-template-compiler": "^2.6.10",
+        "vue-the-mask": "^0.11.1"
     },
     "dependencies": {
         "vue": "^2.6.10"

diff --git a/resources/js/components/IntlDateTimePicker.vue b/resources/js/components/IntlDateTimePicker.vue
@@ -5,7 +5,8 @@
            :class="{'!cursor-not-allowed': disabled}"
            :value="value"
            :name="field.name"
-           :placeholder="placeholder"
+           :placeholder="momentjsFormat"
+           v-mask="maskFormat"
            type="text">
 </template>
 
@@ -14,6 +15,7 @@
     import DateTimeFormatConverter from '../DateTimeFormatConverter'
     import {momentjsLocaleMapping} from '../InternationalMapper'
     import {locale as locales}     from '../Locale'
+    import {mask}                  from 'vue-the-mask'
 
     export default {
         props: {
@@ -56,6 +58,10 @@
             }
         },
 
+        directives: {
+            mask
+        },
+
         data() {
             return {
                 flatpickr: null
@@ -95,6 +101,10 @@
                 }
             },
 
+            maskFormat() {
+                return this.momentjsFormat.replace(/\w/g, '#')
+            },
+
             placeholder() {
                 return moment().format(this.momentjsFormat)
             }