From 12b8d47a79d06c84c0c4ff53b73d0d111cba77f7 Mon Sep 17 00:00:00 2001 From: kolaente Date: Thu, 22 Apr 2021 14:26:48 +0200 Subject: [PATCH] Fix formatting invalid dates --- src/components/input/datepicker.vue | 15 +++++---- src/helpers/time/createDateFromString.js | 4 +++ src/main.js | 42 ++++++++++++------------ 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue index 4d9730af..ec395cd3 100644 --- a/src/components/input/datepicker.vue +++ b/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) diff --git a/src/helpers/time/createDateFromString.js b/src/helpers/time/createDateFromString.js index 62f22942..607d69c9 100644 --- a/src/helpers/time/createDateFromString.js +++ b/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, "/") } diff --git a/src/main.js b/src/main.js index 6f44f87c..07c0880c 100644 --- a/src/main.js +++ b/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,