Fix formatting invalid dates

src/components/input/datepicker.vue

@@ -157,7 +157,7 @@ export default {
 		}
 	},
 	mounted() {
-		this.date = this.value
+		this.setDateValue(this.value)
 		document.addEventListener('click', this.hideDatePopup)
 	},
 	beforeDestroy() {
@@ -165,11 +165,7 @@ export default {
 	},
 	watch: {
 		value(newVal) {
-			if(newVal === null) {
-				this.date = null
-				return
-			}
-			this.date = createDateFromString(newVal)
+			this.setDateValue(newVal)
 		},
 		flatPickrDate(newVal) {
 			this.date = createDateFromString(newVal)
@@ -177,6 +173,13 @@ export default {
 		},
 	},
 	methods: {
+		setDateValue(newVal) {
+			if(newVal === null) {
+				this.date = null
+				return
+			}
+			this.date = createDateFromString(newVal)
+		},
 		updateData() {
 			this.changed = true
 			this.$emit('input', this.date)

src/helpers/time/createDateFromString.js

@@ -7,6 +7,10 @@
  * @returns {Date}
  */
 export const createDateFromString = dateString => {
+	if (dateString instanceof Date) {
+		return dateString
+	}
+
 	if (dateString.includes('-')) {
 		dateString = dateString.replace(/-/g, "/")
 	}

src/main.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {VERSION} from './version.json'
+
 // Register the modal
 import Modal from './components/modal/modal'
 // Add CSS
@@ -166,10 +168,21 @@ Vue.directive('focus', focus)
 import tooltip from '@/directives/tooltip'
 Vue.directive('tooltip', tooltip)
 
-const formatDate = (date, f) => {
-	if (typeof date === 'string') {
-		date = new Date(date)
+const dateIsValid = date => {
+	if (date === null) {
+		return false
 	}
+
+	return date instanceof Date && !isNaN(date)
+}
+
+const formatDate = (date, f) => {
+	if (!dateIsValid(date)) {
+		return ''
+	}
+
+	date = createDateFromString(date)
+
 	return date ? format(date, f) : ''
 }
 
@@ -182,13 +195,12 @@ Vue.component('card', Card)
 Vue.mixin({
 	methods: {
 		formatDateSince: date => {
-			if (date === null) {
+			if (!dateIsValid(date)) {
 				return ''
 			}
 
-			if (typeof date === 'string') {
-				date = new Date(date)
-			}
+			date = createDateFromString(date)
+
 			const currentDate = new Date()
 			let formatted = ''
 			if (date > currentDate) {
@@ -201,20 +213,8 @@ Vue.mixin({
 
 			return formatted
 		},
-		formatDate: date => {
-			if (date === null) {
-				return ''
-			}
-
-			if (typeof date === 'string') {
-				date = new Date(date)
-			}
-			return date ? format(date, 'PPPPpppp') : ''
-		},
-		formatDateShort: date => {
-			console.log('short date', date)
-			return formatDate(date, 'PPpp')
-		},
+		formatDate: date => formatDate(date, 'PPPPpppp'),
+		formatDateShort: date => formatDate(date, 'PPpp'),
 		error: (e, context, actions = []) => message.error(e, context, actions),
 		success: (s, context, actions = []) => message.success(s, context, actions),
 		colorIsDark: colorIsDark,