feat(project): add custom parser

Author: MrWook

docs/.vuepress/components/Formatting.vue

@@ -1,27 +1,28 @@
 <template>
   <div class="example">
-    <Datepicker :format="format"/>
-    <code>
-      &lt;datepicker :format="format"&gt;&lt;/datepicker&gt;
-    </code>
     <div class="settings">
       <h5>Settings</h5>
       <Format
         @selected="selected"
         :format-init="format"
       />
     </div>
-
-    <Datepicker :format="customFormatter" :typeable="true"/>
+    <h3>Default formatter</h3>
+    <Datepicker :format="format"/>
+    <code>
+      &lt;Datepicker :format="format"/&gt;
+    </code>
+    <h3>Custom formatter</h3>
+    <Datepicker :format="customFormatter" :parser="customParser" :typeable="true"/>
     <code>
-      &lt;datepicker :format="format"&gt;&lt;/datepicker&gt;
+      &lt;Datepicker :format="customFormatter" :parser="customParser"/&gt;
     </code>
   </div>
 </template>
 
 <script>
 import Format from '../../../docs/.vuepress/components/Formats'
-import { format } from "date-fns";
+import { format, parse } from "date-fns";
 
 export default {
   name: 'Formatting',
@@ -38,7 +39,10 @@ export default {
       this.format = newVal
     },
     customFormatter(date) {
-      return format(new Date(date), "dd.MM.yyyy");
+      return format(date, this.format)
+    },
+    customParser(date) {
+      return parse(date, this.format, new Date())
     }
   },
 }

docs/guide/DateFormatting/README.md

@@ -24,19 +24,29 @@ Function will be called with date and it has to return the formatted date as a s
 This allow us to use moment, date-fns, globalize or any other library to format date.
 Be aware of the fact that if you use a typeable datepicker the formatting function will be
 triggered on every input change.
+The function formatter needs a custom parser to parse the formatted date back to date object.
 
+Here is an example for date-fns:
 ```vue
 <template>
-  <DatePicker :format="customFormatter"></DatePicker>
+  <DatePicker :format="customFormatter" :parser="customParser"></DatePicker>
 </template>
 <script>
-import { format } from "date-fns";
+import { format, parse } from "date-fns";
 export default {
-  methods: {
-     customFormatter(date) {
-       return format(new Date(date), "dd-MM-yyyy");
-     }
-  }
+  data() {
+      return {
+        format: 'dd.MM.yyyy',
+      }
+    },
+    methods: {
+      customFormatter(date) {
+        return format(date, this.format)
+      },
+      customParser(date) {
+        return parse(date, this.format, new Date())
+      }
+    },
 }
 </script>
 ```

src/components/Datepicker.vue

@@ -8,6 +8,7 @@
       :selected-date="selectedDate"
       :reset-typed-date="resetTypedDate"
       :format="format"
+      :parser="parser"
       :translation="translation"
       :inline="inline"
       :name="name"

src/mixins/inputProps.vue

@@ -8,6 +8,10 @@ export default ({
       ],
       default: 'dd MMM yyyy',
     },
+    parser: {
+      type: Function,
+      default: null,
+    },
     id: {
       type: String,
       default: null,